聊一聊 JavaScript 的 URL 对象是什么?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:186 发布时间:2020-03-15
摘要:时间: 2019-12-05阅读: 116标签: url 时间: 2019-02-20阅读: 4631标签: url1 window.URL是干嘛的? 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社

时间: 2019-12-05阅读: 116标签: url

时间: 2019-02-20阅读: 4631标签: url1 window.URL是干嘛的?

如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL对象。

window对象的URL对象是专门用来将blob或者file读取成一个url的。

那么现在,有了它,我们就可以将URL字符串作为参数传递给URL的构造函数,并创建它的实例解析URL内容了吗?答案是:“是的!”。

window.URL.createObjectURL(file / blob)

要使用URL构造函数创建URL对象,我们在以下代码中使用new来创建:

这个url可以用在html的任何可以使用url的地方,比如img的src ; audio/video的src和source标签等。所有能在浏览器中显示的图片、音频、视频等都是可以用url转换成一个url对象的,这个对象一旦被src引用,就会显示出来。

new URL('');

那么这些file或者blob来自于哪里呢?可以是在本地硬盘中通过input type='file'选择的文件,也可以是通过ajax请求后某个不知名的服务器请求到内存的。

在上面的代码中,我们创建了一个绝对地址的URL对象的实例。但同时,我们还可以传入一个相对地址作为第一个参数,并把相对地址的基础URL作为第二个参数来创建一个URL对象。可能比较拗口,我们举个栗子:

问题: 如果一个img标签的src属性是一个excel文件转换成的url对象,那会发生什么?

new URL('/developer', '');

我想img肯定将它读不出来,因为会img标签会检测文件类型。

看上面的代码,第二个基础URL参数必须是一个有效的绝对地址,而不可以是一个相对的地址片段,它必须要以或开头,我们还可以在下面的代码中以类似于链式定义的方式来使用:

2.URL构造函数将普通url转换成URL对象

const gcUrl = '';const gcDevUrl = new URL("/developer", gcUrl);const gcUrl2 = new URL(gcUrl);const gcSlnUrl = new URL('/solutions', gcUrl2);const Url = new URL('aboutus', gcSlnUrl);

除了可以将一个文件或者blob转化成一个Url对象,还可以将一个url字符串转换成一个URL对象

如果每个参数使用toString()的话,我们的执行结果应该如下:

// ?id=123var parsedUrl = new URL('?id=123v');console.log('parsedUrl' , parsedUrl, parsedUrl.searchParams.get("id")); // 123console.log('parsedUrl' , parsedUrl.toString(), parsedUrl.searchParams.set("name" , 'alexandra')); // ?id=123vname=alexandra

第二个参数是可选参数,只有当第一个参数是相对地址时才应传入。我们传入的字符串或URL对象被转换为USVString对象,该对象对应于一组Unicode标量值可能的序列集合。在我们的代码中,我们可以将它们视为常规字符串。如果两个参数都是相对地址,或者基础URL和相对地址一起无效,则会抛出TypeError异常。我们可以直接将URL对象传递给第二个参数,因为URL对象的toString方法将在构造函数中操作之前将URL对象转换为完整的URL字符串。

searchParams属性返回一个URLSearchParams对象,这样就可以对url对象中的参数进行遍历或者其他操作

URL对象可以具有以下属性:

varurlSearchParams =URL.searchParams;

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等属性,接下来,让我们一起来了解一下它们吧!

3.URL实例对象的toString()方法

Hash属性

URL的toString()方法可以将URL转换成url字符串,且:

hash属性能获得URL中位于#号后的部分。由于字符串没有经过百分比解码,因此仍然对如下所示的特殊符号进行编码。它们使用下面的映射进行编码。在编码过程中,左侧的字符将转换为右侧的字符:

URL.toString() ===URL.href

// émonstration.htmllet url = new URL('émonstration.html')let test = url.toString() === url.href;console.log('url.href', url.href, 'url.toString()' , url.toString() , 'test' , test);// url.href %C3%A9monstration.html url.toString() %C3%A9monstration.html test true
‘:’ — %3A‘/’ — %2F‘?’ — %3F‘#’ — %23‘[‘ — %5B‘]’ — %5D‘@’ — %40‘!’ — %21‘$’ — %24“‘“ — %27‘(‘ — %28‘)’ — %29‘*’ — %2A‘+’ — %2B‘,’ — %2C‘;’ — %3B‘=’ — %3D‘%’ — %25‘ ‘ — %20 或者 +

4.URL对象静态方法createObjectURL(object)

例如,我们有这样的URL字符串,#price,然后我们可以直接取出Hash属性值,如下所示:

URL.createObjectURL(object)是URL 对象的静态方法,用于创建一个DOMString(is a UTF-16 string),其实就是返回了一个在内存中指向传入参数object的引用路径url字符串。生成的这个url字符串会在当前页面的document被销毁的时候失效。

const exampleUrl = new URL('#price');console.log(exampleUrl.hash);
objectURL = URL.createObjectURL(object);objectA File, Blob or MediaSource object to create an object URL for.returnA DOMString containing an object URL that can be used to reference the contents of the specified source object.

在运行结果中,我们在console.log语句中得到‘#price’。该属性是一个USVString,当我们像上面那样获取它时,它会被转换为字符串。因为它不是只读属性,所以我们也可以像下面的代码中那样直接为它赋值:

5.URL对象静态方法revokeObjectURL(objectURL)

exampleUrl.hash = '#newHash';

URL对象的静态方法revokeObjectURL()用于销毁之前通过URL.createObjectURL(object)方法创建的url。一旦调用这个方法就表示告诉浏览器不再保存之前被创建的那个url了。 在revokeObjectURL(objectURL)之后,再次使用该url,会报错,因为该url已经被销毁,无法使用了。

例如:

window.URL.revokeObjectURL(objectURL);objectURLA DOMString representing a object URL that was previously created by calling createObjectURL().return ubdefined
const exampleUrl = new URL('#price');exampleUrl.hash ='#newPrice';console.log(exampleUrl.hash);

我们通过href属性就能获得更新后的URL #newHash

Host 属性

URL对象的host属性是包含主机名的USVString。如果端口包含在: 之后,则我们还将获得主机的端口号。例如,如果我们有:

const exampleUrl = new URL('');console.log(exampleUrl.host);

我们就能获得huozige.grapecity.com.cn:8080。与其他USVString属性一样,当我们检索它时,它会转换为字符串。同样的,它也不是只读属性,所以我们也可以像hash属性一样为它赋值:

const exampleUrl = new URL(' huozige.grapecity.com.cn:8080/功能演示');exampleUrl.host = 'es.grapecity.com.cn:80';console.log(exampleUrl);

这样我们一样能够获得全新的URL。

Hostname 属性

使用hostname属性,可以从URL得到端口外的主机名:

const exampleUrl = new URL(' huozige.grapecity.com.cn:8080/功能演示');console.log(exampleUrl.hostname)

你同样也可以像修改其他属性一样修改hostname属性,例如:

exampleUrl.hostname = ‘newExample.com’;

本文由10bet发布于Web前端,转载请注明出处:聊一聊 JavaScript 的 URL 对象是什么?

关键词:

最火资讯