H5 - URL

矫情吗；* 2023-02-14 13:06 36阅读 0赞

先科普下

### 什么是URL： ###

MDN - 统一资源定位器（URL）是指在Internet上可以找到资源的位置的文本字符串。

通俗点说就是浏览器上边的地址。

URL也可以用于文件传输（FTP），电子邮件（SMTP）和其他应用。

### 组成部分： ###

一个URL由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个URL为例看看其中最重要的部分：

<!-路径->
    http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

![20200602215641277.png][]

`http://` 是协议。它表明了浏览器必须使用何种协议。它通常都是HTTP协议或是HTTP协议的安全版，即HTTPS。Web需要它们二者之一，但浏览器也知道如何处理其他协议，比如`mailto:（打开邮件客户端）或者 ``ftp:（处理文件传输），所以当你看到这些协议时，不必惊讶。`

![20200602215658332.png][]

`www.example.com` 是域名。 它表明正在请求哪个Web服务器。或者，可以直接使用[IP address][], 但是因为它不太方便，所以它不经常在网络上使用。.

![20200602215732677.png][]

`:80` 是端口。 它表示用于访问Web服务器上的资源的技术“门”。如果Web服务器使用HTTP协议的标准端口（HTTP为80，HTTPS为443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。

也就是说80和443端口可被忽略不写，其他的则必须要写。

![20200602215743243.png][]

`/path/to/myfile.html` 是网络服务器上资源的路径。在Web的早期阶段，像这样的路径表示Web服务器上的物理文件位置。

![20200602215755182.png][]

`?key1=value1&key2=value2` 是提供给网络服务器的额外参数。 这些参数是用 `& `符号分隔的键/值对列表。也就是查询参数。

![20200602215808767.png][]

`#SomewhereInTheDocument` 是资源本身的另一部分的锚点. 锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在HTML文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。

### 总结下： ###

**可以把URL比做成一个普通的信件地址：**

**协议：**代表你要使用的邮政服务；

**域名：**是一个城市或者城镇或者乡村；

**路径：**代表信件中要送到哪一座楼；

**参数：**则是提供额外的i信息，比如：大楼的所在的单位（大海阳路9号）；

**最后锚点：**表示信件的收件人是谁。

## ##

### 使用URL： ###

1、在浏览器地址栏输入任何URL，来获取后台资源。

2、在HTML中的使用：

· 在文档中新建连接 用 **<a>** 标签；

· 将文档与其他资源关联，用**<link> <script>** 标签；

· 显示多媒体如图片**<img>**、视频**<video>**, 声音、音乐**<audio>**等等；

· 显示其他HTML文档，用**<iframe>**

### **URL构造函数** ###

URL构造函数它会返回一个新创建的URL对象，这个对象包含一组关于url的信息。（类似于location）

**使用：参数一必传** \- url一个路径

new URL(url, [base])

参数一：可以是相对地址，也可以是绝对地址。

参数二：如果参数一url是一个相对地址，则参数二必须填写，它是作为一个基础的绝对地址出现的，与参数一拼成一个完整的路径地址。

例：

let url = new URL('name', 'https://developer.mozilla.org/zh-CN/')
    console.log(url.href) //  https://developer.mozilla.org/zh-CN/name

通过实例，可获取到URL中的路径信息，不常用，就不啰嗦了。

// 检查浏览器是否支持
    if(window.URL) {
        let url = new window.URL('https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL')
        console.log(url)
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

### \*\* 静态属性 \*\* ###

URL的静态属性有2个，很常用：

**1、URL.createObjectURL ()**

MDN:

该方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定，这个新的URL表示指定的File对象  或者  Blob对象。

官方文档向来都不是人话，来翻译一下：

说白了，该方法会返回一个url字符串，这个url字符串是表示参数对象的字符串，浏览器关闭URL销毁，其参数可以是一个File对象（上篇文章文件上传返回的File对象）或Blob对象或者MediaSource对象。

**用法：**

let obejctURL = new createObjectURL(object)

**参数：**

用于创建URL的File对象、Blob对象、或者 MediaSource对象

**返回值：**

一个DOMString包含了一个对象的URL，该URL的作用是：指定源object的内容。

**2、URL.revokeObjectURL（）**

URL.revokeObjectURL() 是用来释放创建出来的URL对象的，参数是：之前URL.createObjectURL（） 创建出来的对象。

**先来看下内存管理：**

在每次调用createObjectURL（）方法时，都会创建出一个新的URL对象，即便是你使用相同的对象作为参数创建过。

当不在需要这些URL对象时，每个对象必须通过调用URL.createObjectURL()来销毁释放它。

浏览器在document写在的时候，会自动的释放它们，但是为了获得最佳性能和内存使用情况，应该在安全的时机来主动释放掉他们。。。

### 一个小案例： ###

**1、图片上传显示缩略图：**

使用createObjectURL来创建一个描述File对象的URL，然后把图片显示到浏览器，等图片加载完成后在销毁创建出来的objectURL

<input type="file" id="file">
    <div id="img-box"></div>
    <script>
    let file = document.getElementById('file'),
        imgBox = document.getElementById('img-box');
    file.addEventListener('change', (e) => {
        let img = new Image()
        let files = e.target.files[0]
        if (window.URL) {
            let objectURL = URL.createObjectURL(files)
            img.onload = () => {
                URL.revokeObjectURL(objectURL)
            }
            img.src = objectURL
            imgBox.appendChild(img)
        }
    })

**效果展示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

[20200602215641277.png]: https://img-blog.csdnimg.cn/20200602215641277.png
[20200602215658332.png]: https://img-blog.csdnimg.cn/20200602215658332.png
[IP address]: https://developer.mozilla.org/en-US/docs/Glossary/IP_address
[20200602215732677.png]: https://img-blog.csdnimg.cn/20200602215732677.png
[20200602215743243.png]: https://img-blog.csdnimg.cn/20200602215743243.png
[20200602215755182.png]: https://img-blog.csdnimg.cn/20200602215755182.png
[20200602215808767.png]: https://img-blog.csdnimg.cn/20200602215808767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603071946798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200603100223298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70