html中location的用法詳解

【轉自】 https://blog.csdn.net/py941215/article/details/77825921

Location介紹

location指示了其所連接對象的url位置。Document和window對象中都有location屬性，可以通過window.location和document.location訪問。
注意 如果想要獲得當前文檔的完整url字符串，有四種方式

1. document.location
2. document.location.href
3. document.URL
4. document.location.toString()
   以上方式均可以獲得'http://www.example.com'這樣的字符串

屬性

location.href

當前文檔的完整url，如果被改變，文檔將會導航到另一個新的頁面，

  // 網址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
  location.href = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol

location.protocol

當前url所使用的協議，包括結尾的":"

  // 網址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
  location.protocol = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol

location.host

獲取當前的主機信息，包括主機名，":"和端口號
舉例 ：

  // 網址 "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host";
  anchor.host == "developer.mozilla.org:4097"

注意 當服務器使用的端口為默認端口時，則返回的host信息不包括:port

// 網址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"

location.hostname

獲取當前url的主機名

// 網址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"

location.port

返回url的端口信息。沒有寫端口信息的url,實際端口為與協議相關的端口號

  // 網址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
  location.port = "443"

location.pathname

返回url的路徑字符串

  // 網址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
  location.pathname = "/en-US/HTMLHyperlinkElementUtils.host";

注意這里包括最前面的/和最后面的index.html

location.search

又名查詢字符串，返回url中?以及之后的字符串

// 網址為 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"
location.search = '?q=123';
//將去掉問號后的字符串解析為URLSearchParams對象
let params = new URLSearchParams(location.search.substring(1));
//利用get方法獲取指定的參數
let q = parseInt(params.get("q")); // is the number 123

location.hash

返回url中代表頁面某個區域的帶有#的字符串

//網址 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou";
location.hash = '#youhou';

location.username

設置或返回url中域名前面的用戶名

// 網址 "https://anonymous:[e-mail]/en-US/docs/HTMLHyperlinkElementUtils.username"
location.username = 'anonymous';

location.username

設置或返回url中密碼部分

// 網址"https://anonymous:[e-mail]/en-US/docs/HTMLHyperlinkElementUtils.username"
location.password = 'flabada';

location.origin

返回url中完整的協議和主機地址部分,包括端口

//網址https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
location.origin = 'https://developer.mozilla.org';

完整示例

var url = document.location;
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.assign()

該方法使瀏覽器加載並展示URL所指定的文檔

document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

Location.reload()

該方法用於重新加載當前頁面，可以接受一個Boolean類型的參數，參數為true,強制從服務器重新獲取，為false時從緩存中讀取。默認值為false

document.location.reload(true);

Location.replace()

提供一個URL，使頁面跳轉到相應的URL，與location.assign()的區別是，location.replace()跳轉后的頁面不會保存在瀏覽器歷史中，即無法通過返回按鈕返回到該頁面。

document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

Location.toString()

獲取當前頁面的完整URL，相當於location.href