前端必備基礎知識:window.location 詳解

技能樹IT修真院?已認證帳號10 人贊同了該文章

作者簡介:

李中凱

八年多工作經驗 前端負責人,

擅長JavaScript/Vue。

掘金文章專欄:KaysonLi 的個人主頁 - 專欄 - 掘金

---

前端開發人員對window.location對象應該不陌生,通過它不但可以獲取當前頁面的地址信息,還可以修改某些屬性,實現頁面跳轉和刷新等。

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

window.location.href     → 'https://www.jianshu.com/search?q=JS#comments'               .origin   → 'https://www.jianshu.com'               .protocol → 'https:'               .host     → 'www.jianshu.com'               .hostname → 'www.jianshu.com'               .port     → ''               .pathname → '/search/'               .search   → '?q=JS'               .hash     → '#comments'window.location.assign('url')               .replace('url')               .reload()               .toString()

同事寫的很優秀的代碼
附帶代碼

function formatHashPath(_path, _params = {}) {  const { origin, pathname, hash } = window.location;  const [realHash, query] = hash.split('?');  const queryObj = qs.parse(query);  const queryString = qs.stringify({    ...queryObj,    ..._params,    disableNav: 'NO',  });  const result = `${origin}${pathname}${realHash || ''}${_path || ''}?${queryString || ''}`;  return result;}

window.location 屬性一覽表

window.location含義.originURL 基礎地址,包括協議名、域名和端口號.protocol協議 (http:或https:).host域名+端口號.hostname域名.port端口號.pathname路徑(以/開頭).search查詢字符串,以?開頭.hash頁面錨點,以#開頭.href完整 URL

比較容易混淆的是host和hostname這兩個屬性,區別是前者還包含了端口號。

修改屬性值

以上屬性除了origin是只讀屬性,其他都可以修改。修改后的效果就是跳轉到相應的新地址。

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()導航到指定 URL.replace()導航到指定 URL并刪除當前頁面的訪問記錄.reload()重新加載當前頁面.toString()返回 URL 字符串

.toString()和.href都是返回 URL,它們之間有區別嗎?結果是一樣的,性能上稍微有點差別。通過 JSPerf 上的性能測試結果可以看出,.href稍快,通過window.location拼接字符串的形式速度最慢。

.assign()和直接修改href是等價的,那么它們跟.replace()的區別是什么呢?

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

.assign()執行流程:

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

.replace()執行流程:

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

這個特性在用 JS 控制頁面導航時非常重要,稍不注意會造成意外的的頁面回退地址。.

---

作者簡介:

李中凱

八年多工作經驗 前端負責人,

擅長JavaScript/Vue。

掘金文章專欄:KaysonLi 的個人主頁 - 專欄 - 掘金

本文已經獲得李中凱老師授權轉發,其他人若有興趣轉載,請直接聯系作者授權。

更多的學習資料,請看這里:

http://www.jnshu.com/login/1/36856070?source=zhihu-article-lizhongkai

發布于 2020-06-19 21:48 漫思