URL()

浏览器原生提供 URL() 接口，它是一个构造函数，用来构造、解析和编码 URL。

一般情况下，通过 window.URL() 可以拿到这个构造函数。 location 对象获取当前页面的 URL 并保存相应的 URL 信息，而 URL() 则可传入指定的 URL 进行解析和编码，进而获取 URL 信息保存在实例内。

构造函数参数

URL() 作为构造函数，可以生成 URL 实例。它可接受以下类型的参数：

接收一个参数，表示 URL 的字符串作为参数，生成一个 URL 实例。如果参数不是合法的 URL，会报错。
```
var url = new URL('http://www.example.com/index.html');
url.href
// "http://www.example.com/index.html"
```
如果 URL 字符串是一个相对路径，那么需要表示绝对路径的第二个参数，作为计算基准。
```
var url1 = new URL('index.html', 'http://example.com');
url1.href
// "http://example.com/index.html"
```

var url2 = new URL('page2.html', 'http://example.com/page1.html'); url2.href // "http://example.com/page2.html"

var url3 = new URL('..', 'http://example.com/a/b.html') url3.href // "http://example.com/"

3. 除了字符串，参数也可以接收一个 URL 实例。这时，`URL()` 会自动读取该实例的 href 属性，作为实际参数。

## 实例属性
URL 实例的属性与 Location 对象的属性基本一致，返回当前 URL 的信息。
* url.href：返回整个 URL
* url.protocol：返回协议，以冒号:结尾
* url.hostname：返回域名
* url.host：返回域名与端口，包含:号，默认的80和443端口会省略
* url.port：返回端口
* url.origin：返回协议、域名和端口
* url.pathname：返回路径，以斜杠/开头
* url.search：返回查询字符串，以问号?开头
* url.searchParams：返回一个URLSearchParams实例，该属性是Location对象没有的
* url.hash：返回片段识别符，以井号#开头
* url.password：返回域名前面的密码
* url.username：返回域名前面的用户名
```js
var url = new URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1');

url.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
url.protocol
// "http:"
url.hostname
// "www.example.com"
url.host
// "www.example.com:4097"
url.port
// "4097"
url.origin
// "http://www.example.com:4097"
url.pathname
// "/path/a.html"
url.search
// "?x=111"
url.searchParams
// URLSearchParams {}
url.hash
// "#part1"
url.password
// "passwd"
url.username
// "user"

只有 origin 属性是只读的，其他属性都可写，并且会立即生效。改变 URL 实例的属性 (除 origin)，都会实时反映在 URL 实例当中。

构造函数静态方法

注意：是静态方法而非实例上挂载的方法，通过构造函数直接调用

URL.createObjectURL()

调用 URL.createObjectURL() 方法会为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了 File 对象或 Blob 对象的 URL。

// HTML 代码如下
// <div id="display"/>
// <input
//   type="file"
//   id="fileElem"
//   multiple
//   accept="image/*"
//   onchange="handleFiles(this.files)"
//  >
var div = document.getElementById('display');

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]); // 文件生成为 url 作为 img 标签的图片来源
    div.appendChild(img);
  }
}

URL.revokeObjectURL()

URL.revokeObjectURL() 方法用来释放 URL.createObjectURL() 方法生成的 URL 实例。它的参数就是 `URL.createObjectURL() 方法返回的 URL 字符串。

var div = document.getElementById('display');

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]);
    div.appendChild(img);
    img.onload = function() {
      window.URL.revokeObjectURL(this.src);
    }
  }
}

jtwang7 / JavaScript-Note

JS BOM 篇 - URL 构造函数 #46

URL()

构造函数参数

构造函数静态方法

URL.createObjectURL()

URL.revokeObjectURL()