URL 对象

作用

使用 URL 对象可以解析 url 路径，指定 File 或 Blob 对象。

语法

构造函数

const urlObj = new URL(url [, base])

参数

• url：表示绝对或相对 URL 的 DOMString。

  ​ 如果 url 是相对 URL，则会将 base 用作基准 URL。

  ​ 如果 url 是绝对URL，则参数 base 将被忽略。

• base ：可选，表示基准 URL 的 DOMString，默认值为 ''。

  ​ 当 url 是相对 URL 时，base 才会生效。

let m = 'https://developer.mozilla.org';
let a = new URL("/", m);                                
// => 'https://developer.mozilla.org/'
let b = new URL(m);                                    
// => 'https://developer.mozilla.org/'

属性

• hash

  返回从'#'开始的字符串的。

  var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
  
  url.hash // Returns '#Examples'

• host

  返回域（即主机名）和 端口。

  var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/host');
  var result = url.host // "developer.mozilla.org"
  
  var url = new URL('https://developer.mozilla.org:443/en-US/docs/Web/API/URL/host');
  var result = url.host // "developer.mozilla.org"
  // The port number is not included because 443 is the scheme's default port
  
  var url = new URL('https://developer.mozilla.org:4097/en-US/docs/Web/API/URL/host');
  var result = url.host // "developer.mozilla.org:4097"

• hostname

  返回 URL 域名。

  var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname');
  
  var result = url.hostname; // Returns:'developer.mozilla.org'

• href

  返回完整的 url。

  var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href');
  
  var result = url.href; // Returns: 'https://developer.mozilla.org/en-US/docs/Web/API/URL/href'

• origin 只读

  返回协议名、域名和端口号。

  var result = new URL("blob:https://mozilla.org:443/").origin;
  // 返回:'https://developer.mozilla.org:443'

• password

  返回域名前面指定的密码。

  var url = new URL('https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password');
  var result = url.password; // Returns:"flabada"

• pathname

  以 ‘/‘ 起头紧跟着 URL 文件路径的 DOMString。

  var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname');
  
  var result = url.pathname; // Returns:"/en-US/docs/Web/API/URL/pathname"

• port

  返回 URL 端口号。

• protocol

  返回 URL 协议名，末尾带 ':'。

• search

  返回以“？”开头字符的字符串。

  var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
  
  var queryString = url.search; // Returns:"?q=123"

• searchParams 只读

  返回 URLSearchParams对象，可用于访问search中找到的各个查询参数。

  // https://some.site/?id=123
  const parsedUrl = new URL(window.location.href);
  console.log(parsedUrl.searchParams.get("id")); // "123"

• username

  包含在域名前面指定的用户名。

方法

实例方法

• toString()

  返回包含整个 URL 的字符串。 是URL.href的同义词，不能用于修改值。

  const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
  
  url.toString() 
  // 返回："https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"

• toJSON()

  返回包含整个 URL 的字符串（与href属性相同）。

  const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
  
  url.toJSON();
  //返回:"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"

类方法

• createObjectURL()

  返回 URL 实例，这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

  window.URL = window.URL || window.webkitURL;
  
  var img = document.createElement("img");
  
   img.src = window.URL.createObjectURL(files[i]);
   img.height = 60;
   img.onload = function() {
   	window.URL.revokeObjectURL(this.src);
   }
   

  //这是预览上传的视频的方法
  const video = document.getElementById('video');
  
  const obj_url = window.URL.createObjectURL(blob);
  video.src = obj_url;
  video.play()
  
  window.URL.revokeObjectURL(obj_url);

• revokeObjectURL()

  销毁之前使用 URL.createObjectURL()方法创建的 URL 实例。

  在每次调用 URL.createObjectURL() 时，都会创建新的 URL 对象。所以当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

参考资料：

https://developer.mozilla.org/en-US/docs/Web/API/URL