JS中最容易被輕視的對象----location和history

最近開始移動端頁面的時候，被window.location和window.history坑了一把，因而決定對這兩個對象進行一個全面的剖析。下面進行咱們的正文...

location

首先介紹的是location對象，location是BOM對象中最經常使用的一個對象之一，它提供了與當前窗口中加載的文檔的有關的信息，還提供了一些導航的功能。說到這裏，其實location是一個很是的特別的對象，由於window.location===document.location.另外location對解析URL很是的有幫助，下面看一下location的屬性表。

以此例子：http://www.google.com:8080/lo... (注：隨便打的)

屬性名	例子	說明
hash	"#type"	設置或返回URL中的#後面的hash值，若是沒有則爲""
host	"www.google.com:8080"	設置或返回URL中的主機名稱和端口號
hostName	"www.google.com"	設置或返回URL中的主機名稱
href	"http://www.google.com:8080/loanOrder/detail?orderId=1236#type"	設置或返回完整的URL
pathname	"/loanOrder/detail"	設置或返回當前 URL 的路徑部分
port	"8080"	設置或返回URL中的端口號，若是URL中沒有端口號，則爲""
protocol	"http:"	設置或返回當前 URL 的協議，一般是http:或https:
search	"?orderId=1236"	返回URL的查詢字符串。這個字符串以"?"開頭

<center>location屬性表</center>

---

接下來咱們說說，基於location對象咱們經常使用的一些操做。

1.查詢字符串參數

function getArgsQuery() {
        //取得查詢字符串並去掉"?"
        var searchStr=window.location.search.length>0?window.location.search.substring(1):"";
        //將每一項集成到數組中
        var searchStrArray=searchStr.length>0?searchStr.split("&"):[];
        //存儲最後返回的對象
        var args={};
        searchStrArray.forEach(function (item) {
            //屬性
            var name=decodeURIComponent(item.split("=")[0]);
            //值
            var value=decodeURIComponent(item.split("=")[1]);
            args[name]=value;
        });
        return args;
    }

2.改變遊覽器的位置

1) window.location.reload() //從新加載頁面

在調用reload()不傳任何參數時，頁面自上次請求以來並無改變過，頁面就會從遊覽器緩存中加載，若是傳入參數true時，頁面會強制從服務器從新加載。

例：
 window.location.reload()  //從新加載（有可能從緩存中加載）
 window.location.reload(true) //從新加載(從服務器從新加載)

2) window.location.assign(url); //加載新的文檔

與 window.location.assign(url)效果同樣的還有

 - window.location.href=url;
 - window.location=url;

3) window.location.replace(url); //用新文檔替換當前文檔

一樣是加載新文檔，區別就是window.location.assign(url)是能夠重新文檔再回到當前文檔，可是window.location.replace(url)就不行了，用來實現過渡頁面時很是好用，可是有些webview倒是不支持的，好比小編在開發的釘釘上的微應用的時候就遇到這個，這時咱們該如何作呢？下面就是咱們講到的history對象。

history

History 對象最初設計來表示窗口的瀏覽歷史。但出於隱私方面的緣由，History 對象再也不容許腳本訪問已經訪問過的實際 URL。惟一保持使用的功能只有 back()、forward() 和 go() 方法。這三個也很是簡單，我就隨便寫幾個例子，意思一下。

例子：
       
    window.history.go(-2);  //後退兩頁   
    window.history.go(-1);  //後退一頁   
    window.history.go(1);   //前進一頁
    window.history.go(2);   //前進兩頁
   
    window.history.back();//後退一頁
    window.history.forward();//前進一頁

這裏要說一下的是window.history.go(),我在查閱資料的時候發現window.history.go()是能夠傳一個字符串參數的，此時的遊覽器會跳轉到歷史記錄中包含該字符串的第一個位置（可能前進可能後退）。小編一開始倒是也不知道這個，就本身試了一下，可是頁面就刷新了一下，並無匹配到頁面，小編試了好幾回，也換了好幾個遊覽器也沒有成功，若是其餘小夥們成功，還望留言告知。

---

上面三個方面相信不少人都知道，可是小編要介紹的是下面這兩個方法：window.history.pushState()和 window.history.replaceState().

1) window.history.pushState(stateObject,title,url )

將當前URL和history.state加入到history中，並用新的state和URL替換當前，不會形成頁面刷新。

--參數解釋
stateObject    //與要跳轉到的URL對應的狀態信息，沒有特殊的狀況下能夠直接傳{}
title       //如今大多數瀏覽器不支持或者忽略這個參數，咱們在用的時候建議傳一個空字符串
url            //這個參數提供了新歷史紀錄的地址,它不必定要是絕對地址，也能夠是相對的，不可跨域

2) window.history.replaceState(stateObject,title,url)

用新的state和URL替換當前，不會形成頁面刷新。

--參數解釋
stateObject    //與要跳轉到的URL對應的狀態信息，沒有特殊的狀況下能夠直接傳{}
title       //如今大多數瀏覽器不支持或者忽略這個參數，咱們在用的時候建議傳一個空字符串
url            //這個參數提供了新歷史紀錄的地址,它不必定要是絕對地址，也能夠是相對的，不可跨域

有些小夥伴們看到這裏可能對stateObject這個參數不太清楚，下面咱們舉個例子來體會這個stateObject是怎麼回事。說到這個，我先說一下popstate事件，這個事件是幹嗎的，或者怎樣才能觸發的，官方給咱們的答案是：

popstate每次活動歷史記錄條目在同一文檔的兩個歷史記錄條目之間改變時，將事件分派到窗口。

可能不少人跟我同樣，看到這個解釋的時候一臉懵逼的，那咱們就簡單的，哪些方法能夠觸發這個popstate事件。下面打開這個連接https://www.lagou.com/gongsi/...（這個是拉勾網上個人公司主頁連接，順道幫忙打個廣告），在控制檯咱們執行下面這段代碼看看。

window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
window.history.pushState({name:"阿里巴巴"}, "", "347.html");
window.history.pushState({name: "支付寶"}, "", "164268.html");
window.history.replaceState({name: "華爲"}, "", "j87078.html");

window.history.back(); // alert "location: https://www.lagou.com/gongsi/347.html, state: {"name":"阿里巴巴"}"
console.log(window.history.state);//{name:"阿里巴巴"}

window.history.back(); // alert "location: https://www.lagou.com/gongsi/35166.html, state: null
console.log(window.history.state);//null

window.history.go(2);  // alert "location: https://www.lagou.com/gongsi/j87078.html, state: {"name":"華爲"}
console.log(window.history.state);//{name:"華爲"}

相信執行這段代碼以後，你就更好理解了，沒什麼是執行一次代碼不能解決的，若是有那就多執行幾回。
回到前面我拋出的問題，怎麼替代window.location.replace()方法，可能很多小夥們已經知道了，不知道的小夥們，我就貼一下例子：

/*
    可能還有其餘的方法，若是有歡迎留言交流
    這裏我依舊拿https://www.lagou.com/gongsi/j35166.html舉例
    打開控制檯，輸入下面這段代碼。
*/
history.replaceState({name: "華爲"}, "", "j87078.html");
window.location.reload();

/*
執行完以後，咱們發現不能回退了，是否是就跟window.location.replace()實現一樣的效果了。
*/

結語： 沒什麼是執行一次代碼不能解決的，若是有那就多執行幾回。