淺談location對象

簡介

Location 對象存儲在 Window 對象的 Location 屬性中，表示那個視窗中當前顯示的文檔的 Web 地址。通過Location對象，可以獲取URL中的各項信息，調用對象方法也可以重新載入或替換當前文檔。

在控制台輸入window.location可以獲取Location對象的詳細信息：

對象屬性

href

href屬性是最常用的一種屬性，通過window.location.href可以獲取完整的URL。Location的對象屬性都有一個特點，即對象屬性都是writable，可以通過屬性值的替換來重新設置屬性值。這也引出了對象屬性最常用的一種用法，通過重新設置href屬性來跳轉網頁。

window.location.href = "www.baidu.com"

同源策略三兄弟

眾所周知，所有瀏覽器全都採取同源策略，即：

• 協議相同
• 功能變數名稱相同
• 埠相同

協議、功能變數名稱、埠在Location對象中分別對應的屬性是：protocol，hostname，port

window.location.href            // http://localhost:8080/#/b?a=1
window.location.protocol        // http:
window.location.hostname        // localhost
window.location.port            // 8080

很多時候，我們需要同時比對協議、功能變數名稱和埠這三項屬性是否全部相等，而一個個分別調用又太麻煩了，此時可以使用origin屬性，該屬性返回完整的協議和主機地址（包括埠）。

當需要主機地址的時候，可以調用host屬性，該屬性返回主機地址，即功能變數名稱和埠。

window.location.href            // http://localhost:8080/#/b?a=1
window.location.origin          // http://localhost:8080
window.location.host            // localhost:8080

hash

Location對象擁有hash屬性，用來獲取從#開始的URL（錨）。#代表網頁中的一個位置，它之後的字元串，就是該位置的標識符，又稱為錨點。

window.location.href            // http://example.com:1234/test.htm#part2
window.location.hash            // #part2

pathname

pathname代表著URL的路徑部分

window.location.href            // http://example.com:1234/test/test.htm#part2
window.location.pathname        // /test/test.html

search

search也是一個常用屬性，用來獲取URL的查詢部分

window.location.href            // http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
window.location.search          // f=hdom_loc_search

tips：

1.使用window.location.search修改查詢部分需要註意，不需要在key和value之間添加空格，因為空格自動會轉為%20

2.當一個URL中#（hash）在?之前，使用hash屬性會取到#開始的所有字元串，而search屬性永遠為空，因為當同時存在#和?時，search屬性只能取到#之前的查詢屬性，而#之後的查詢屬性會被歸入錨點字元串。該問題在vue中經常出現，因為使用vue-router進行路由跳轉時，有時會使用query進行傳參，傳參是直接顯示在URL中的，此時通過window.location.search取參會出現這個問題。

解決方案有兩種：

• 通過vue-router的this.$route.query來取值，不通過window.location.search獲取查詢參數，當然，更建議通過params進行隱式傳值，減少危險
• 使用vue-router的history模式來直接去除錨點

對象方法

assign方法

assign方法用於載入新的文檔，接收一個參數，即新的文檔的URL，效果類似於將該URL賦值給href屬性。

window.location.assign("www.baidu.com")     // 跳轉到www.baidu.com
window.location.href = "www.baidu.com"      // 效果同上

reload方法

reload方法用於重新載入當前文檔，接收一個可選參數，值為布爾類型，預設為false代表是否強制重新載入。

window.location.reload()            // 類似於刷新
window.location.reload(false)       // 同上
window.location.reload(true)        // 強制重新載入

replace方法

replace方法類似於assign方法，載入新的文檔，但是它與assign方法的不同在於，它是用新的URL替換History對象中的當前記錄，相當於替換當前文檔。

window.location.replace("www.baidu.com")        // history對象被替換