当前位置: 首页 > Web前端 > HTML

摘自HTML-Location_017

时间:2023-04-02 14:34:30 HTML

摘自HTML-LocationLocation接口表示它链接到的对象的位置URL。所做的修改反映在它们相关的对象上。Document和Window接口都有这样一个链接位置,分别通过Document.location和Window.location访问。属性Location接口不继承任何属性,而是从URLUtils实现这些属性。Location.href包含整个URL的DOMString//https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hrefconsole.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获取路由参数varanchor=document.getElementById("myAnchor");varqueryString=anchor.search;//returns:'?q=123'//进一步解析:letparams=newURLSearchParams(queryString);letq=parseInt(params.get("q"));//是123号获取路由参数返回一个objectconstgetUrlPargm=()=>{consturl=location.search;//获取“?”后面的字符串url中的字符consttheRequest=newObject();if(url.indexOf('?')!=-1){conststr=url.substr(1);让strs=str.split('&');for(leti=0;i1){arrSource=unescape(this.location.search).substring(1,this.location.search.length).split("&"),i=0;while(i0&&arrSource[i].split("=")[0].toLowerCase()==paramName.toLowerCase()&&(paramValue=arrSource[i].split("=")[1],isFound=!0),i++}returnparamValue==""&&(paramValue=null),paramValueLocation.hash包含块标识符DOMString,以“#”开头//https://developer.mozilla.org/zh-CN/docs/HTMLHyperlinkElementUtils.href#youhouconsole.log(location.hash);//#youhouLocation.username包含URL之前domainname用户名的DOMString。//https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.usernameconsole.log(location.username);//anonymousLocation.password在URL域名前包含一个密码的DOMString。//让我们在文档中varanchor=document.getElementByID("myAnchor");varresult=anchor.password;//Returns:'flabada';Location.origin只读规范形式DOMString包含页面来源的域名。如果在没有先设置用户名属性的情况下设置,则会静默失败来自MDN的mozilla.orgvarurl=document.createElement('a');url.href='https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';控制台日志(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);//(空白-https假定端口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.orgmethodLocation没有继承任何方法,而是实现了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()替换的新页面不会保存在会话的历史记录中,这意味着用户将无法使用后退按钮转到该页面。Location.replace()方法用给定的URL替换当前资源。与assign()方法不同的是调用replace()方法后,当前页面不会保存在会话历史(sessionHistory)中,这样用户点击后退后就不会被重定向到这个页面按钮。如果由于违反安全规则而导致分配失败,浏览器将抛出类型为SECURITY_ERROR的DOMException。当调用该方法的脚本来源与拥有Location对象的来源不同时,通常会出现这种异常。这时,脚本通常存在于不同的域中。如果URL不合法,浏览器也会抛出SYNTAX_ERRORDOMException类型的异常。Location.toString()返回包含整个URL的DOMString。它与读取URLUtils.href具有相同的效果。但是不可能用它修改Location的值。//让我们想象一个元素在文档中varanchor=document.getElementById("myAnchor");varresult=anchor.toString();//返回:'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString'https://developer.mozilla.org...