URL相关Web APIs

参考文档：MDN > Web API接口 > URLUtils

MDN > Web API接口 > URL

MDN > Web API接口 > Location

MDN > Web API接口 > HTMLAnchorElement

   

   

一、URLUtils

1. 定义了和URL相关的一些实用方法

2. URLUtils本身没有对象，但是有几个类型实现了它：Location，URL，HTMLAnchorElement，HTMLAreaElement

3. 属性

属性	描述	举例
URLUtils.href	包含整个URL的一个DOMString	https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
URLUtils.protocol	包含URL对应协议的一个DOMString，最后有一个":"。	https:
URLUtils.host	包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。（若端口号为该scheme的默认端口号，则省略）	developer.mozilla.org 若href="https://developer.mozilla.org:443/"，host也为developer.mozilla.org 若href="https://developer.mozilla.org:4097/"，host为developer.mozilla.org:4097 若href="http://www.126.com/"，host为www.126.com 若href="http://www.126.com:80/"，host也为www.126.com
URLUtils.hostname	包含URL域名的一个DOMString。	developer.mozilla.org
URLUtils.port	包含端口号的一个DOMString。 （若端口号为该scheme的默认端口号，则结果为空字符串）	"" 若href="https://developer.mozilla.org:443/"，port也为"" 若href="https://developer.mozilla.org:4097/"，port为"4097" 若href="http://www.126.com/"，port也为"" 若href="http://www.126.com:80/"，port也为""
URLUtils.pathname	包含URL中路径部分的一个DOMString，开头有一个"/"。	/en-US/search
URLUtils.search	包含URL参数的一个DOMString，开头有一个"?"。	?q=URL
URLUtils.hash	包含块标识符的DOMString，开头有一个"#"。	#search-results-close-container
URLUtils.username	包含URL中域名前的用户名的一个DOMString。
URLUtils.password	包含URL域名前的密码的一个 DOMString。
URLUtils.origin 只读	包含页面来源的域名的标准形式DOMString。	https://developer.mozilla.org
URLUtils.searchParams	Returns a URLSearchParams object allowing to access the GET query arguments contained in the URL.

4. 方法

方法	描述	举例
URLUtils.toString()	返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。

二、URL

1. URL 接口是一个包含若干静态方法的对象，用来创建 URLs。

2. 属性

实现URLUtils的属性

3. 方法

实现URLUtils的方法

4. 构造器

1. • URL() 构造函数返回一个新创建的URL对象，表示由参数定义的URL。
   • 语法

     url = new URL(urlString, [baseURLstring])
     url = new URL(urlString, baseURLobject)

参数	描述
urlString	是一个表示绝对或相对URL的DOMString。 如果urlString是相对URL，则baseURLstring或baseURLobject（无论存在）都将用作基本URL。 如果urlString是绝对URL，则将忽略baseURLstring和baseURLobject。
baseURLstring	是一个表示基本URL的DOMString，以便在urlString是相对URL时使用。 如果未指定，且在参数中未传递baseURLobject，则默认为"about:blank"。 如果它是一个无效的绝对URL，构造函数将引发一个类型为SYNTAX_ERROR的DOMException
baseURLobject	是表示基本URL的URL 对象，以便在urlString是相对URL时使用。

• • 　　例：

    var a = new URL("/", "https://developer.mozilla.org"); // Creates a URL pointing to 'https://developer.mozilla.org/'

    var b = new URL("https://developer.mozilla.org"); // Creates a URL pointing to 'https://developer.mozilla.org'

    var c = new URL('en-US/docs', b); // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'

    var d = new URL('/en-US/docs', b); // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'

    var f = new URL('/en-US/docs', d); // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'

    var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");// Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'

    var h = new URL('/en-US/docs', a); // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'

    var i = new URL('/en-US/docs', ''); // Raises a SYNTAX ERROR exception as '/en-US/docs' is not valid

    var j = new URL('/en-US/docs'); // Raises a SYNTAX ERROR exception as 'about:blank/en-US/docs' is not valid

    var k = new URL('http://www.example.com', 'https://developers.mozilla.com');// Creates a URL pointing to 'https://www.example.com'

    var l = new URL('http://www.example.com', b); // Creates a URL pointing to 'https://www.example.com'

       

5. 静态方法

方法	描述
URL.createObjectURL()	返回一个DOMString ，包含一个唯一的blob链接（该链接协议为以blob:，后跟唯一标识浏览器中的对象的掩码）。
URL.revokeObjectURL()	销毁之前使用URL.createObjectURL()方法创建的URL实例。

   

三、Location

1. Location表示其关联的对象所展示的页面的地址等信息，对该对象的修改会反映到关联的对象上。 Document 和 Window 接口都有一个关联的Location，可以分别用Document.location和Window.location来访问它们对应的Location。

2. 属性

实现URLUtils的属性（除URLUtils.searchParams以外）

3. 方法

1. • 实现URLUtils的方法
   • Location本身的方法

方法	描述
Location.assign()	加载给定URL的内容资源到这个Location对象所关联的对象上。
Location.reload()	重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
Location.replace()	用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

四、HTMLAnchorElement

1. HTMLAnchorElement 接口表示超链接元素，并提供一些特别的属性和方法以用于操作这些元素的布局和显示。

2. 属性

1. • 继承自父类HTMLElement的属性

HTMLAnchorElement.accessKey	是一个代表了单个字符的 DOMString，单个字符可以切换输入焦点到超链接。
HTMLAnchorElement.charset	Is a DOMString representing the character encoding of the linked resource.
HTMLAnchorElement.coords	Is a DOMString representing a comma-separated list of coordinates.
HTMLAnchorElement.download	Is a DOMString indicating that the linked resource is intended to be downloaded rather than displayed in the browser. The value represent the proposed name of the file. If the name is not a valid filename of the underlying OS, browser will adapt it. The value is a URL with a scheme like http:, file:, data: or even blob: (created with URL.createObjectURL).
HTMLAnchorElement.hreflang	Is a DOMString that reflects the hreflang HTML attribute, indicating the language of the linked resource.
HTMLAnchorElement.media	Is a DOMString that reflects the media HTML attribute, indicating the intended media for the linked resource.
HTMLAnchorElement.name	Is a DOMString representing the anchor name.
HTMLAnchorElement.rel	Is a DOMString that reflects the rel HTML attribute, specifying the relationship of the target object to the linked object.
HTMLAnchorElement.relList 只读	Returns a DOMTokenList that reflects the rel HTML attribute, as a list of tokens.
HTMLAnchorElement.rev	Is a DOMString representing that the rev HTML attribute, specifying the relationship of the link object to the target object.
HTMLAnchorElement.shape	Is a DOMString representing the shape of the active area.
HTMLAnchorElement.tabindex	Is a long containing the position of the element in the tabbing navigation order for the current document.
HTMLAnchorElement.target	Is a DOMString that reflects the target HTML attribute, indicating where to display the linked resource.
HTMLAnchorElement.text	Is a DOMString being a synonym for the Node.textContent property.
HTMLAnchorElement.type	Is a DOMString that reflects the type HTML attribute, indicating the MIME type of the linked resource.

• • 实现URLUtils的属性（除URLUtils.searchParams以外）

3. 方法

1. • 继承自父类HTMLElement的方法

方法	描述
HTMLElement.blur()	Removes the  keyboard focus from the current element.
HTMLElement.focus()	Gives the keyboard focus to the current element.
Location.replace()	用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

• •  实现URLUtils的方法