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:[email protected]/en-US/docs/HTMLHyperlinkElementUtils.username
console.log(location.username);
//anonymous
Location.password
包含URL域名前的密碼的一個 DOMString
。
// Let's <a id="myAnchor" href="https://anonymous:[email protected]/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...