前端必備基礎(chǔ)知識：window.location 詳解

作者簡介：
李中凱
八年多工作經(jīng)驗前端負責(zé)人旨巷，
擅長JavaScript/Vue。
掘金文章專欄：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公眾號：1024譯站

前端開發(fā)人員對 window.location對象應(yīng)該不陌生添忘，通過它不但可以獲取當前頁面的地址信息采呐，還可以修改某些屬性，實現(xiàn)頁面跳轉(zhuǎn)和刷新等搁骑。

我們以一個常見的 URL 為例斧吐，看看window.location包含哪些屬性和方法。

window.location.href     → 'http://www.reibang.com/search?q=JS#comments'               .origin   → 'http://www.reibang.com'               .protocol → 'https:'               .host     → 'www.reibang.com'               .hostname → 'www.reibang.com'               .port     → ''               .pathname → '/search/'               .search   → '?q=JS'               .hash     → '#comments'

window.location.assign('url')               .replace('url')               .reload()               .toString()

window.location 屬性一覽表

`window.location`	含義
`.origin`	URL 基礎(chǔ)地址仲器，包括協(xié)議名煤率、域名和端口號
`.protocol`	協(xié)議 (`http:` 或 `https:`)
`.host`	域名+端口號
`.hostname`	域名
`.port`	端口號
`.pathname`	路徑(以`/`開頭)
`.search`	查詢字符串，以`?`開頭
`.hash`	頁面錨點乏冀，以`#`開頭
`.href`	完整 URL

比較容易混淆的是host和hostname這兩個屬性蝶糯，區(qū)別是前者還包含了端口號。

修改屬性值

以上屬性除了origin是只讀屬性煤辨，其他都可以修改裳涛。修改后的效果就是跳轉(zhuǎn)到相應(yīng)的新地址木张。

window.location.protocol = 'https'               .host     = 'localhost:8080'               .hostname = 'localhost'               .port     = '8080'               .pathname = 'path'               .search   = 'q=vue' // (不需要帶 ?)               .hash     = 'target' // (不需要帶 #)               .

如何訪問 Location 對象

window.location返回 Location 類型的一個實例對象，包含當前頁面的地址信息端三∠侠瘢可以通過以下幾種方式訪問：

window.location          → Locationwindow.document.location → Locationdocument.location        → Locationlocation                 → Location

這幾個變量都是等價的，因為它是全局變量郊闯。但是建議避免直接用location變量妻献，因為很容易跟其他局部變量混淆，造成不必要的麻煩团赁。比如：

location.protocol; // 'https'function localFile() {  const location = '/vue';  return location.protocol;  // ? undefined  //     這里的局部變量 "location"覆蓋了全局變量}

推薦用window.location育拨，這樣一眼就可以看出用的是全局變量。

window.location 方法一覽表

| window.location | 動作
|
| --- | --- |
| .assign() | 導(dǎo)航到指定 URL |
| .replace() | 導(dǎo)航到指定 URL并刪除當前頁面的訪問記錄 |
| .reload() | 重新加載當前頁面 |
| .toString() | 返回 URL 字符串 |

.toString()和.href都是返回 URL欢摄，它們之間有區(qū)別嗎熬丧？結(jié)果是一樣的，性能上稍微有點差別怀挠。通過 JSPerf 上的性能測試結(jié)果可以看出析蝴，.href稍快，通過window.location拼接字符串的形式速度最慢绿淋。

image

.assign() 和直接修改href是等價的金顿，那么它們跟.replace()的區(qū)別是什么呢毛肋？

.assign() 在跳轉(zhuǎn)新地址的同時會留下當前頁面的訪問記錄，點擊瀏覽器返回按鈕會回到原來的頁面双戳，.replace()則不會保留猪狈。

.assign()執(zhí)行流程：

1. 打開空白頁2. 訪問 www.kaysonli.com (當前頁)3. 加載新頁面 ?? `window.location.assign('https://www.w3schools.com')`4. 點擊瀏覽器返回按鈕5. 回到?? www.kaysonil.com

.replace()執(zhí)行流程：

1. 打開空白頁2. Go to www.kaysonli.com (當前頁)3. 加載新頁面 ?? `window.location.assign('https://www.w3schools.com')`4. 點擊瀏覽器返回按鈕5. 回到 ?? 空白頁

這個特性在用 JS 控制頁面導(dǎo)航時非常重要叭莫，稍不注意會造成意外的的頁面回退地址问窃。

作者簡介：
李中凱
八年多工作經(jīng)驗前端負責(zé)人谨朝，
擅長JavaScript/Vue。
掘金文章專欄：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公眾號：1024譯站

本文已經(jīng)獲得李中凱老師授權(quán)轉(zhuǎn)發(fā)组贺，其他人若有興趣轉(zhuǎn)載凸舵，請直接聯(lián)系作者授權(quán)祖娘。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者