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/hrefLocation.protocol包含URL对应协议的一个DOMString,最后有一个":"。// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/protocolconsole.log(location.protocol)// https:Location.host包含了域名的一个DOMString,可能在该串最后带有一个":“并跟上URL的端口号。//https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.hostconsole.log(location.host)//developer.mozilla.org:4097Location.hostname包含URL域名的一个DOMString。// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hostnameconsole.log(location.hostname)//developer.mozilla.orgLocation.port包含端口号的一个DOMString。// https://developer.mozilla.org:443/en-US/docs/HTMLHyperlinkElementUtils.portconsole.log(location.port)//'443'Location.pathname包含URL中路径部分的一个DOMString,开头有一个“/"。// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathnameconsole.log(location.pathname)// /en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathnameLocation.search包含URL参数的一个DOMString,开头有一个“?”。// https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123console.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获取路由参数 返回一个objectconst 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”)//返回值:liziceshifunction 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#youhouconsole.log(location.hash);// #youhouLocation.username包含URL中域名前的用户名的一个DOMString。//https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.usernameconsole.log(location.username);//anonymousLocation.password包含URL域名前的密码的一个 DOMString。// Let’s <a id=“myAnchor” href=“https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"> be in the documentvar anchor = document.getElementByID(“myAnchor”);var result = anchor.password; // Returns:‘flabada’;Location.origin 只读包含页面来源的域名的标准形式DOMString。如果在没有首先设置用户名属性的情况下设置,则会静默失败//https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/originconsole.log(location.origin)//https://developer.mozilla.org来自MDNvar 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-containerconsole.log(url.protocol); // https:console.log(url.host); // developer.mozilla.orgconsole.log(url.hostname); // developer.mozilla.orgconsole.log(url.port); // (blank - https assumes port 443)console.log(url.pathname); // /en-US/searchconsole.log(url.search); // ?q=URLconsole.log(url.hash); // #search-results-close-containerconsole.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 documentvar anchor = document.getElementById(“myAnchor”);var result = anchor.toString(); // Returns: ‘https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString'https://developer.mozilla.org…
...