Location 接口表示其链接到的对象的位置

Window.location - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Window/location

Location - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Location

Location

 

The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively.

Anatomy Of Location

 

HTML

<span id="href" title="href"><span id="origin" title="origin"><span id="protocol" title="protocol">https:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8080</span></span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>

Copy to Clipboard

CSS

html, body { height: 100%; }

html { display: table; width: 100%; }

body { display: table-cell; text-align: center; vertical-align: middle; font-family: Georgia; font-size: 200%; line-height: 1em; white-space: nowrap; }

[title] { position: relative; display: inline-block; box-sizing: border-box; line-height: 2em; cursor: pointer; }

[title]:before { content: attr(title); font-family: monospace; position: absolute; top: 100%; width: 100%; left: 50%; margin-left: -50%; font-size: 40%; line-height: 1.5; background: black; }

[title]:hover:before, :target:before { background: black; color: yellow; }

[title] [title]:before { margin-top: 1.5em; }

[title] [title] [title]:before { margin-top: 3em; }

[title] [title] [title] [title]:before { margin-top: 4.5em; }

[title]:hover, :target { position: relative; z-index: 1; outline: 50em solid rgba(255, 255, 255, .8); }

Copy to Clipboard

JavaScript

document.body.addEventListener('click', function (evt) {
    evt.preventDefault();

    window.location.hash = evt.target.hasAttribute('id')
        ? '#' + evt.target.getAttribute('id')
        : '';
});

Copy to Clipboard

Result

Properties

Location.ancestorOrigins

Is a static DOMStringList containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given Location object.

Location.href

Is a stringifier that returns a USVString containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.

Location.protocol

Is a USVString containing the protocol scheme of the URL, including the final ':'.

Location.host

Is a USVString containing the host, that is the hostname, a ':', and the port of the URL.

Location.hostname

Is a USVString containing the domain of the URL.

Location.port

Is a USVString containing the port number of the URL.

Location.pathname

Is a USVString containing an initial '/' followed by the path of the URL, not including the query string or fragment.

Location.search

Is a USVString containing a '?' followed by the parameters or "querystring" of the URL. Modern browsers provide URLSearchParams and URL.searchParams to make it easy to parse out the parameters from the querystring.

Location.hash

Is a USVString containing a '#' followed by the fragment identifier of the URL.

Location.origin Read only

Returns a USVString containing the canonical form of the origin of the specific location.

Methods

Location.assign()

Loads the resource at the URL provided in parameter.

Location.reload()

Reloads the current URL, like the Refresh button.

Location.replace()

Replaces the current resource with the one at the provided URL (redirects to the provided URL). The difference from the assign() method and setting the href property is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.

Location.toString()

Returns a USVString containing the whole URL. It is a synonym for HTMLAnchorElement.href, though it can't be used to modify the value.

Examples

// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org:8080
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // 8080
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org:8080

Location

Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。

属性

Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。

Location.href

包含整个URL的一个DOMString

Location.protocol (en-US)

包含URL对应协议的一个DOMString，最后有一个":"。

Location.host

包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。

Location.hostname

包含URL域名的一个DOMString。

Location.port (en-US)

包含端口号的一个DOMString。

Location.pathname (en-US)

包含URL中路径部分的一个DOMString，开头有一个“/"。

Location.search

 包含URL参数的一个DOMString，开头有一个“?”。

Location.hash

包含块标识符的DOMString，开头有一个“#”。

Location.username (en-US)

包含URL中域名前的用户名的一个DOMString。

Location.password (en-US)

包含URL域名前的密码的一个 DOMString。

Location.origin (en-US) 只读

包含页面来源的域名的标准形式DOMString。

 

 

 

 

 

Location

 

 

Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。

属性

Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。

Location.href

包含整个URL的一个DOMString

Location.protocol (en-US)

包含URL对应协议的一个DOMString，最后有一个":"。

Location.host

包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。

Location.hostname

包含URL域名的一个DOMString。

Location.port (en-US)

包含端口号的一个DOMString。

Location.pathname (en-US)

包含URL中路径部分的一个DOMString，开头有一个“/"。

Location.search

 包含URL参数的一个DOMString，开头有一个“?”。

Location.hash

包含块标识符的DOMString，开头有一个“#”。

Location.username (en-US)

包含URL中域名前的用户名的一个DOMString。

Location.password (en-US)

包含URL域名前的密码的一个 DOMString。

Location.origin (en-US) 只读

包含页面来源的域名的标准形式DOMString。

方法

Location没有继承任何方法，但实现了来自URLUtils的方法。

Location.assign()

加载给定URL的内容资源到这个Location对象所关联的对象上。

Location.reload()

重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean (en-US)，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

Location.replace()

用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

Location.toString()

返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。

例子

// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org

Copy to Clipboard

规范