如果你想獲取站點的URL信息，那么window.location對象什么很適合你!使用其屬性獲取有關(guān)當前頁面地址的信息，或使用其方法進行某些頁面重定向或刷新。

[[332779]]

https://segmentfault.com/search?q=前端小智#2

window.location.origin    → '"https://segmentfault.com' 
               .protocol  → 'https:' 
               .host      → 'segmentfault.com' 
               .hostname  → 'segmentfault.com' 
               .port      → '' 
               .pathname  → '/search' 
               .search    → '?q=前端小智' 
               .hash      → '#2' 
               .href      → 'https://segmentfault.com/search?q=前端小智#2' 
window.location.assign('url') 
               .replace('url') 
               .reload() 
               .toString() 

window.location 屬性

host 和 hostname 的區(qū)別

在上面的示例中，你可能注意到host和hostname返回相同的值。那么為什么要這些屬性。好吧，這與端口號有關(guān)，讓我們來看看。

沒有端口的 URL

window.location.host; // 'segmentfault.com' 
window.location.hostname; // 'segmentfault.com' 
 
window.location.port; // '' 

帶端口的 URL

https://segmentfault.com/search"8080

window.location.host; // 'segmentfault.com:8080' 
window.location.hostname; // 'segmentfault.com' 
 
window.location.port; // '8080' 

因此，host將包括端口號，而hostname將僅返回主機名。

如何更改 URL 屬性

我們不僅可以調(diào)用location` 屬性來檢索URL信息，還可以使用它來設(shè)置新屬性并更改URL。

// 開始 'https://segmentfault.com/' 
 
window.location.pathname = '/tidbits'; // 設(shè)置 pathname 
 
// 結(jié)果 'https://segmentfault.com/tidbits' 

下面是你可以更改的屬性的完整列表

// 事例 
window.location.protocol = 'https' 
               .host     = 'localhost:8080' 
               .hostname = 'localhost' 
               .port     = '8080' 
               .pathname = 'path' 
               .search   = 'query string' // (這里不用寫 `?`) 
               .hash     = 'hash' // (這里不用寫 `#`) 
               .href     = 'url' 

唯一不能設(shè)置的屬性是window.location.origin，此屬性是只讀的。

Location 對象

window.location返回一個Location對象。它為我們提供有關(guān)頁面當前地址的信息。但是我們還可以通過幾種方式訪問Location對象。

window.location          → Location 
window.document.location → Location 
document.location        → Location 
location                 → Location 

我們這樣做的原因是這些是我們?yōu)g覽器中的全局變量。

window.location vs location

上面四個屬性都指向同一個Location對象。我個人更喜歡window.location并且實際上會避免使用location。主要是因為location看起來像一個普通變量，并且我們有時可能會不小心將其命名為變量，這將覆蓋全局變量。舉個例子：

// https://www.samanthaming.com 
 
location.protocol; // 'https' 
 
function localFile() { 
  const location = '/sam'; 
 
  return location.protocol; 
  // ❌ undefined 
  //    b/c local "location" has override the global variable 
} 

我想大多數(shù)開發(fā)人員都知道window是一個全局變量。這樣就不太可能引起混淆。老實說，直到我寫了這篇文章，我才知道location 是一個全局變量。建議大家多使用 window.location 來代替其它寫法。

window.location 方法

window.location.toString

根據(jù) MDN :

此方法返回 URL 的 USVString，它是 Location.href 的只讀版本。

換句話說，我們可以這樣得到 href 的值：

// https://www.samanthaming.com 
 
window.location.href; // https://www.samanthaming.com 
window.location.toString(); // https://www.samanthaming.com 

assign vs replace

這兩種方法都是重定向或?qū)Ш降搅硪粋€URL。區(qū)別在于assign 是將當前頁面保存在歷史記錄中，因此用戶可以使用“后退”按鈕導航到該頁面。而使用replace方法時，不會保存它。讓我們來看一個例子。

Assign

1. 打開一個新的空白頁 
2. 輸入 www.samanthaming.com (當前頁) 
 
3. 使用 `window.location.assign('https://www.w3schools.com')` 載入新頁面 
4. 按 "返回上一頁" 
5. 返回到了 👉 www.samanthaming.com 

Replace

1. 打開一個新的空白頁 
2. 輸入 www.samanthaming.com (當前頁) 
 
3. 使用 `window.location.assign('https://www.w3schools.com')` 載入新頁面 
4. 按 "返回上一頁" 
5. 返回到一個空白頁 

如何讓頁面重定向

如何重定向到另一個頁面，有3種方法。

window.location.href = 'https://www.samanthaming.com'; 
 
window.location.assign('https://www.samanthaming.com'); 
 
window.location.replace('https://www.samanthaming.com'); 

replace vs assign vs href

這三個都可以重定向，區(qū)別在于瀏覽器的歷史記錄。href和assign 會把當前頁面保存在歷史記錄中，而replace則不會。因此，如果你想創(chuàng)建一種導航無法回到原始頁面的體驗，請使用replace??

現(xiàn)在的問題是href與assign。我更喜歡assign，因為它是一種方法，因此感覺好像我正在執(zhí)行一些操作。還有一個額外的好處是它更易于測試。我已經(jīng)編寫了許多Jest測試，因此通過使用一種方法，它使其更易于模擬。

window.location.assign = jest.fn(); 
 
myUrlUpdateFunction(); 
 
expect(window.location.assign).toBeCalledWith('http://my.url'); 

最終希望備忘單，希望能對你有所幫助，在需要的時候，能快速給你帶來答案。謝謝大家的觀看。

作者：Samantha Ming 譯者：前端小智 來源：medium 原文：https://morioh.com/p/b444d291bdfb

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端小智公眾號。