JS之BOM篇-location對象

location對象提供目前視窗所加載文檔的相關資訊，它既是window對象的屬性，也是document對象的屬性，它也可以單獨使用

location将URL解析成獨立的片段，讓開發人員可以通過不同的屬性通路這些片段

URL： <code>http://127.0.0.1:3030/index?limit=10&amp;page=1#one</code>

屬性名

例子

說明

hash

#one

哈希值：#号後面的字元串（包含#号），如果URL中不包含散列則傳回空字元串

host

127.0.0.1:3030

主機位址：主機名加端口号（如果有端口号）

hostname

127.0.0.1

主機名

href

http://127.0.0.1:3030/index?limit=10&amp;page=1#one

目前頁面的完整URL

origin

http://127.0.0.1:3030

伺服器源：包含協定、主機名和端口号

pathname

/index

路徑名稱：目錄和檔案名（如果有檔案名）

port

3030

端口号：如果沒有則傳回空字元串

protocol

http:

協定：通常是http:或https:

search

?limit=10&amp;page=1

查詢字元串：?号後面的字元串（包含?号）

如果URL中<code>?</code>之前有一個<code>#</code>，比如'#one?limit=10'，那麼location.search得到的就是空字元串，因為location.search隻能取到'?'後面和'#'前面的内容

雖然location.search傳回從問号到URL末尾的所有内容，但卻沒有辦法逐個通路其中的每個查詢字元串參數。下面建立一個通用函數，傳回包含所有屬性的一個對象，并能夠解析參數:

assign()方法接收一個URL作為參數，該方法可以立即打開新URL，并在浏覽器曆史記錄中生成一條記錄。如果将location.href或window.location設定為一個URL值，相當于調用assign()方法。

每當修改location的屬性(hash除外)，頁面都會以新URL重新加載

replace()方法也接收一個URL作為參數，但是新URL不會在浏覽器中生成新的曆史記錄，也就是說使用者不能回到前一個頁面

reload()方法用于重新加載目前顯示的頁面。如果調用reload()方法時不傳遞任何參數，頁面會以最有效的方式重新加載。也就是說，如果頁面自上次請求以來并沒有改變過，頁面就會從浏覽器緩存中重新加載。如果要強制從伺服器重新加載，則需要傳遞參數true

HTML5新增了hashchange事件，hash值變化時會觸發該事件。這個事件可以讓開發人員更友善的根據hash變化，在Ajax應用中動态請求資料。在使用時，必須把hashchange事件添加給window對象，當hash值變化時，事件對象額外包含了oldURL和newURL兩個屬性，這兩個屬性分别儲存着參數清單變化前後的完整URL

注意： IE浏覽器不支援事件對象新增的oldURL和newURL這兩個屬性，相容方案如下

部落格: https://blog.86886.wang

GitHub: https://github.com/wmui