共计 5436 个字符，预计需要花费 14 分钟才能阅读完成。
HTML-Location 摘抄
Location 接口表示其链接到的对象的位置 URL。所做的修改反映在与之相关的对象上。Document 和 Window 接口都有这样一个链接的 Location，分别通过 Document.location 和 Window.location 访问。
属性
Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。
Location.href
包含整个 URL 的一个 DOMString
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href
console.log(location.href)
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href
Location.protocol
包含 URL 对应协议的一个 DOMString，最后有一个 ”:”。
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/protocol
console.log(location.protocol)
// https:
Location.host
包含了域名的一个 DOMString，可能在该串最后带有一个 ”:” 并跟上 URL 的端口号。
//https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host
console.log(location.host)
//developer.mozilla.org:4097
Location.hostname
包含 URL 域名的一个 DOMString。
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hostname
console.log(location.hostname)
//developer.mozilla.org
Location.port
包含端口号的一个 DOMString。
// https://developer.mozilla.org:443/en-US/docs/HTMLHyperlinkElementUtils.port
console.log(location.port)
//’443′
Location.pathname
包含 URL 中路径部分的一个 DOMString，开头有一个“/”。
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname
console.log(location.pathname)
// /en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname
Location.search
包含 URL 参数的一个 DOMString，开头有一个“?”。
// https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123
console.log(location.search)
//?q=123
获取路由参数
var anchor = document.getElementById(“myAnchor”);
var queryString = anchor.search; // Returns:’?q=123′
// Further parsing:
let params = new URLSearchParams(queryString);
let q = parseInt(params.get(“q”)); // is the number 123
获取路由参数 返回一个 object
const getUrlPargm = () => {
const url = location.search; // 获取 url 中 ”?” 符后的字串
const theRequest = new Object();
if (url.indexOf(‘?’) != -1) {
const str = url.substr(1);
let strs = str.split(‘&’);
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split(‘=’)[0]] = unescape(strs[i].split(‘=’)[1]);
}
}
return theRequest;
};
// 获取指定的 URL 参数值
//URL:http://www.baidu.com/index?name=liziceshi
// 参数：paramName URL 参数
// 调用方法:getParam(“name”)
// 返回值:liziceshi
function getParam(paramName) {
paramValue = “”, isFound = !1;
if (this.location.search.indexOf(“?”) == 0 && this.location.search.indexOf(“=”) > 1) {
arrSource = unescape(this.location.search).substring(1, this.location.search.length).split(“&”), i = 0;
while (i < arrSource.length && !isFound) arrSource[i].indexOf(“=”) > 0 && arrSource[i].split(“=”)[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split(“=”)[1], isFound = !0), i++
}
return paramValue == “” && (paramValue = null), paramValue
Location.hash
包含块标识符的 DOMString，开头有一个“#”。
//https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou
console.log(location.hash);
// #youhou
Location.username
包含 URL 中域名前的用户名的一个 DOMString。
//https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username
console.log(location.username);
//anonymous
Location.password
包含 URL 域名前的密码的一个 DOMString。
// Let’s <a id=”myAnchor” href=”https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username”> be in the document
var anchor = document.getElementByID(“myAnchor”);
var result = anchor.password; // Returns:’flabada’;
Location.origin 只读
包含页面来源的域名的标准形式 DOMString。
如果在没有首先设置用户名属性的情况下设置，则会静默失败
//https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
console.log(location.origin)
//https://developer.mozilla.org
来自 MDN
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
方法
Location 没有继承任何方法，但实现了来自 URLUtils 的方法。
Location.assign()
加载给定 URL 的内容资源到这个 Location 对象所关联的对象上。Location.assign() 方法会触发窗口加载并显示指定的 URL 的内容。
如果由于安全原因无法执行跳转，那么会抛出一个 SECURITY_ERROR 类型的 DOMException。当调用此方法的脚本来源和页面的 Location 对象中定义的来源隶属于不同域的时候，就会抛出上述错误。
如果传入了一个无效的 URL，则会抛出一个 SYNTAX_ERROR 类型的 DOMException。
// 跳转到 Location.reload 这篇文章
document.location.assign(‘https://developer.mozilla.org/zh-CN/docs/Web/API/Location.reload’);
Location.reload()
重新加载来自当前 URL 的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为 true 时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false 或没有制定这个参数，浏览器可能从缓存当中加载页面。
Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。
该方法在跨域调用（执行该方法的脚本文件的域和 Location 对象所在页面的跨不同）时，将会抛出 DOMException 异常.
object.reload(forcedReload);
Location.replace()
用给定的 URL 替换掉当前的资源。与 assign() 方法不同的是用 replace() 替换的新页面不会被保存在会话的历史 History 中，这意味着用户将不能用后退按钮转到该页面。
Location.replace() 方法以给定的 URL 来替换当前的资源。与 assign() 方法 不同的是调用 replace() 方法后，当前页面不会保存到会话历史中（session History），这样用户点击回退按钮将不会再跳转到该页面。
因违反安全规则导致的赋值失败，浏览器将会抛出类型为 SECURITY_ERROR 的 DOMException 异常。当调用该方法的脚本所属的源与拥有 Location 对象所属源不同时，通常情况会发生这种异常, 此时通常该脚本是存在不同的域下。
如果 URL 不合法，浏览器也会抛出 SYNTAX_ERROR 类型 DOMException 的异常。
Location.toString()
返回一个 DOMString，包含整个 URL。它和读取 URLUtils.href 的效果相同。但是用它是不能够修改 Location 的值的。
// Let’s imagine an <a id=”myAnchor” href=”https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString”> element is in the document
var anchor = document.getElementById(“myAnchor”);
var result = anchor.toString(); // Returns: ‘https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString’
https://developer.mozilla.org…