Location介紹
location指示了其所連接對(duì)象的url位置璧疗。Document和window對(duì)象中都有l(wèi)ocation屬性，可以通過(guò)window.location和document.location訪問(wèn)覆履。
注意 如果想要獲得當(dāng)前文檔的完整url字符串，有四種方式
- document.location
- document.location.href
- document.URL
- document.location.toString()
以上方式均可以獲得'http://www.example.com'這樣的字符串
屬性
location.href
當(dāng)前文檔的完整url费薄，如果被改變硝全，文檔將會(huì)導(dǎo)航到另一個(gè)新的頁(yè)面，
// 網(wǎng)址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
location.href = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol
location.protocol
當(dāng)前url所使用的協(xié)議楞抡，包括結(jié)尾的":"
// 網(wǎng)址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
location.protocol = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol
location.host
獲取當(dāng)前的主機(jī)信息伟众，包括主機(jī)名，":"和端口號(hào)
舉例 ：
// 網(wǎng)址 "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host";
anchor.host == "developer.mozilla.org:4097"
注意 當(dāng)服務(wù)器使用的端口為默認(rèn)端口時(shí)拌倍，則返回的host信息不包括:port
// 網(wǎng)址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"
location.hostname
獲取當(dāng)前url的主機(jī)名
// 網(wǎng)址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"
location.port
返回url的端口信息赂鲤。沒(méi)有寫(xiě)端口信息的url,實(shí)際端口為與協(xié)議相關(guān)的端口號(hào)
// 網(wǎng)址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.port = "443"
location.pathname
返回url的路徑字符串
// 網(wǎng)址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.pathname = "/en-US/HTMLHyperlinkElementUtils.host";
注意這里包括最前面的/和最后面的index.html
location.search
又名查詢字符串，返回url中?以及之后的字符串
// 網(wǎng)址為 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"
location.search = '?q=123';
//將去掉問(wèn)號(hào)后的字符串解析為URLSearchParams對(duì)象
let params = new URLSearchParams(location.search.substring(1));
//利用get方法獲取指定的參數(shù)
let q = parseInt(params.get("q")); // is the number 123
location.hash
返回url中代表頁(yè)面某個(gè)區(qū)域的帶有#的字符串
//網(wǎng)址 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou";
location.hash = '#youhou';
location.username
設(shè)置或返回url中域名前面的用戶名
// 網(wǎng)址 "https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.username = 'anonymous';
location.username
設(shè)置或返回url中密碼部分
// 網(wǎng)址"https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.password = 'flabada';
location.origin
返回url中完整的協(xié)議和主機(jī)地址部分,包括端口
//網(wǎng)址https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
location.origin = 'https://developer.mozilla.org';
完整示例
var url = document.location;
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.assign()
該方法使瀏覽器加載并展示URL所指定的文檔
document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
Location.reload()
該方法用于重新加載當(dāng)前頁(yè)面柱恤，可以接受一個(gè)Boolean類(lèi)型的參數(shù)数初，參數(shù)為true,強(qiáng)制從服務(wù)器重新獲取，為false時(shí)從緩存中讀取梗顺。默認(rèn)值為false
document.location.reload(true);
Location.replace()
提供一個(gè)URL泡孩，使頁(yè)面跳轉(zhuǎn)到相應(yīng)的URL，與location.assign()的區(qū)別是寺谤，location.replace()跳轉(zhuǎn)后的頁(yè)面不會(huì)保存在瀏覽器歷史中仑鸥，即無(wú)法通過(guò)返回按鈕返回到該頁(yè)面。
document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
Location.toString()
獲取當(dāng)前頁(yè)面的完整URL变屁，相當(dāng)于location.href
