摘要:摘抄接口表示其鏈接到的對(duì)象的位置。所做的修改反映在與之相關(guān)的對(duì)象上。方法會(huì)觸發(fā)窗口加載并顯示指定的的內(nèi)容。因違反安全規(guī)則導(dǎo)致的賦值失敗,瀏覽器將會(huì)拋出類型為的異常。
HTML-Location摘抄
Location 接口表示其鏈接到的對(duì)象的位置URL。所做的修改反映在與之相關(guān)的對(duì)象上。 Document 和 Window 接口都有這樣一個(gè)鏈接的Location,分別通過(guò) Document.location和Window.location 訪問(wèn)。
屬性Location 接口不繼承任何屬性,但是實(shí)現(xiàn)了那些來(lái)自 URLUtils 的屬性。
Location.href包含整個(gè)URL的一個(gè)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對(duì)應(yīng)協(xié)議的一個(gè)DOMString,最后有一個(gè)":"。
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/protocol console.log(location.protocol) // https:Location.host
包含了域名的一個(gè)DOMString,可能在該串最后帶有一個(gè)":"并跟上URL的端口號(hào)。
//https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host console.log(location.host) //developer.mozilla.org:4097Location.hostname
包含URL域名的一個(gè)DOMString。
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hostname console.log(location.hostname) //developer.mozilla.orgLocation.port
包含端口號(hào)的一個(gè)DOMString。
// https://developer.mozilla.org:443/en-US/docs/HTMLHyperlinkElementUtils.port console.log(location.port) //"443"Location.pathname
包含URL中路徑部分的一個(gè)DOMString,開(kāi)頭有一個(gè)“/"。
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname console.log(location.pathname) // /en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathnameLocation.search
包含URL參數(shù)的一個(gè)DOMString,開(kāi)頭有一個(gè)“?”。
// https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123 console.log(location.search) //?q=123
獲取路由參數(shù)
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
獲取路由參數(shù) 返回一個(gè)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參數(shù)值 //URL:http://www.baidu.com/index?name=liziceshi //參數(shù):paramName URL參數(shù) //調(diào)用方法: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), paramValueLocation.hash
包含塊標(biāo)識(shí)符的DOMString,開(kāi)頭有一個(gè)“#”。
//https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou console.log(location.hash); // #youhouLocation.username
包含URL中域名前的用戶名的一個(gè)DOMString。
//https://anonymous:[email protected]/en-US/docs/HTMLHyperlinkElementUtils.username console.log(location.username); //anonymousLocation.password
包含URL域名前的密碼的一個(gè) DOMString。
// Let"s be in the document var anchor = document.getElementByID("myAnchor"); var result = anchor.password; // Returns:"flabada";Location.origin 只讀
包含頁(yè)面來(lái)源的域名的標(biāo)準(zhǔn)形式DOMString。
如果在沒(méi)有首先設(shè)置用戶名屬性的情況下設(shè)置,則會(huì)靜默失敗
//https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin console.log(location.origin) //https://developer.mozilla.org
來(lái)自MDN
var url = document.createElement("a"); url.; 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沒(méi)有繼承任何方法,但實(shí)現(xiàn)了來(lái)自URLUtils的方法。
Location.assign()加載給定URL的內(nèi)容資源到這個(gè)Location對(duì)象所關(guān)聯(lián)的對(duì)象上。
Location.assign()方法會(huì)觸發(fā)窗口加載并顯示指定的URL的內(nèi)容。
如果由于安全原因無(wú)法執(zhí)行跳轉(zhuǎn),那么會(huì)拋出一個(gè)SECURITY_ERROR類型的DOMException。當(dāng)調(diào)用此方法的腳本來(lái)源和頁(yè)面的Location對(duì)象中定義的來(lái)源隸屬于不同域的時(shí)候,就會(huì)拋出上述錯(cuò)誤。
如果傳入了一個(gè)無(wú)效的URL,則會(huì)拋出一個(gè)SYNTAX_ERROR類型的DOMException。
// 跳轉(zhuǎn)到Location.reload這篇文章 document.location.assign("https://developer.mozilla.org/zh-CN/docs/Web/API/Location.reload");Location.reload()
重新加載來(lái)自當(dāng)前 URL的資源。他有一個(gè)特殊的可選參數(shù),類型為 Boolean,該參數(shù)為true時(shí)會(huì)導(dǎo)致該方法引發(fā)的刷新一定會(huì)從服務(wù)器上加載數(shù)據(jù)。如果是 false或沒(méi)有制定這個(gè)參數(shù),瀏覽器可能從緩存當(dāng)中加載頁(yè)面。
Location.reload() 方法用來(lái)刷新當(dāng)前頁(yè)面。該方法只有一個(gè)參數(shù),當(dāng)值為 true 時(shí),將強(qiáng)制瀏覽器從服務(wù)器加載頁(yè)面資源,當(dāng)值為 false 或者未傳參時(shí),瀏覽器則可能從緩存中讀取頁(yè)面。
該方法在跨域調(diào)用(執(zhí)行該方法的腳本文件的域和 Location 對(duì)象所在頁(yè)面的跨不同)時(shí),將會(huì)拋出 DOMException 異常.
object.reload(forcedReload);Location.replace()
用給定的URL替換掉當(dāng)前的資源。與 assign()方法不同的是用 replace()替換的新頁(yè)面不會(huì)被保存在會(huì)話的歷史 History中,這意味著用戶將不能用后退按鈕轉(zhuǎn)到該頁(yè)面。
Location.replace()方法以給定的URL來(lái)替換當(dāng)前的資源。 與assign() 方法 不同的是調(diào)用replace()方法后,當(dāng)前頁(yè)面不會(huì)保存到會(huì)話歷史中(session History),這樣用戶點(diǎn)擊回退按鈕將不會(huì)再跳轉(zhuǎn)到該頁(yè)面。
因違反安全規(guī)則導(dǎo)致的賦值失敗,瀏覽器將會(huì)拋出類型為SECURITY_ERROR的DOMException 異常。當(dāng)調(diào)用該方法的腳本所屬的源與擁有Location對(duì)象所屬源不同時(shí),通常情況會(huì)發(fā)生這種異常,此時(shí)通常該腳本是存在不同的域下。
如果URL不合法,瀏覽器也會(huì)拋出SYNTAX_ERROR類型DOMException 的異常。
Location.toString()返回一個(gè)DOMString,包含整個(gè)URL。 它和讀取URLUtils.href的效果相同。但是用它是不能夠修改Location的值的。
// Let"s imagine an 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...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/102586.html
摘要:摘抄接口表示其鏈接到的對(duì)象的位置。所做的修改反映在與之相關(guān)的對(duì)象上。方法會(huì)觸發(fā)窗口加載并顯示指定的的內(nèi)容。因違反安全規(guī)則導(dǎo)致的賦值失敗,瀏覽器將會(huì)拋出類型為的異常。 HTML-Location摘抄 Location 接口表示其鏈接到的對(duì)象的位置URL。所做的修改反映在與之相關(guān)的對(duì)象上。 Document 和 Window 接口都有這樣一個(gè)鏈接的Location,分別通過(guò) Documen...
摘要:概述上一章講的是其他一些常用的小插件,這一章講的是自定義插件。打包并查看文件更多配置請(qǐng)查閱關(guān)于自定義章節(jié)資源源代碼 0x001 概述 上一章講的是其他一些常用的小插件,這一章講的是自定義插件。 0x002 環(huán)境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...
摘要:好處正則的出現(xiàn),對(duì)字符串的復(fù)雜操作變得更為簡(jiǎn)單。將正則和字符串關(guān)聯(lián)對(duì)字符串進(jìn)行匹配。替換其實(shí)用的就是類中的獲取先要將正則表達(dá)式編譯成正則對(duì)象。用于描述正則表達(dá)式,可以對(duì)正則表達(dá)式進(jìn)行解析。 定義 其實(shí)是用來(lái)操作字符串的一些規(guī)則。其實(shí)更多是用正則解決字符串操作的問(wèn)題。 好處 正則的出現(xiàn),對(duì)字符串的復(fù)雜操作變得更為簡(jiǎn)單。 特點(diǎn) 將對(duì)字符串操作的代碼用一些符號(hào)來(lái)表示。只要使用了指定符號(hào),就可...
摘要:概述函數(shù)組件其實(shí)就是一個(gè)函數(shù),一個(gè)函數(shù)。所以可以用來(lái)做一些快速的封裝,比如,一個(gè)組件的代碼太多,顯得咋亂,又沒(méi)有復(fù)雜到需要另起一個(gè)組件,可以用函數(shù)組件源碼這是標(biāo)題欄這是導(dǎo)航欄哈哈效果總結(jié)沒(méi)有多余的東西,對(duì)性能也有所提升哦 0x000 概述 函數(shù)組件其實(shí)就是一個(gè)函數(shù),一個(gè)render函數(shù)。 0x001 栗子 源碼 import React from react import Reac...
閱讀 3494·2021-11-18 10:02
閱讀 1624·2021-10-12 10:12
閱讀 3007·2021-10-09 09:53
閱讀 4902·2021-09-09 09:34
閱讀 883·2021-09-06 15:02
閱讀 2787·2021-08-05 10:02
閱讀 3149·2019-08-30 15:44
閱讀 3133·2019-08-28 18:04