摘要：最近開始移動端頁面的時候，被和坑了一把，于是決定對這兩個對象進(jìn)行一個全面的剖析。但出于隱私方面的原因，對象不再允許腳本訪問已經(jīng)訪問過的實(shí)際。唯一保持使用的功能只有和方法。華為執(zhí)行完之后，我們發(fā)現(xiàn)不能回退了，是不是就跟實(shí)現(xiàn)同樣的效果了。

最近開始移動端頁面的時候，被window.location和window.history坑了一把，于是決定對這兩個對象進(jìn)行一個全面的剖析。下面進(jìn)行我們的正文...

location

首先介紹的是location對象，location是BOM對象中最常用的一個對象之一，它提供了與當(dāng)前窗口中加載的文檔的有關(guān)的信息，還提供了一些導(dǎo)航的功能。說到這里，其實(shí)location是一個非常的特別的對象，因?yàn)?em>window.location===document.location.另外location對解析URL非常的有幫助，下面看一下location的屬性表。

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

接下來我們說說，基于location對象我們常用的一些操作。

1.查詢字符串參數(shù)

function getArgsQuery() {
        //取得查詢字符串并去掉"?"
        var searchStr=window.location.search.length>0?window.location.search.substring(1):"";
        //將每一項(xiàng)集成到數(shù)組中
        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() //重新加載頁面

在調(diào)用reload()不傳任何參數(shù)時，頁面自上次請求以來并沒有改變過，頁面就會從游覽器緩存中加載，如果傳入?yún)?shù)true時，頁面會強(qiáng)制從服務(wù)器重新加載。

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

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

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

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

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

同樣是加載新文檔，區(qū)別就是window.location.assign(url)是可以從新文檔再回到當(dāng)前文檔，但是window.location.replace(url)就不行了，用來實(shí)現(xiàn)過渡頁面時非常好用，但是有些webview卻是不支持的，比如小編在開發(fā)的釘釘上的微應(yīng)用的時候就遇到這個，這時我們該如何做呢？下面就是我們講到的history對象。

history

History 對象最初設(shè)計(jì)來表示窗口的瀏覽歷史。但出于隱私方面的原因，History 對象不再允許腳本訪問已經(jīng)訪問過的實(shí)際 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。這三個也非常簡單，我就隨便寫幾個例子，意思一下。

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

這里要說一下的是window.history.go(),我在查閱資料的時候發(fā)現(xiàn)window.history.go()是可以傳一個字符串參數(shù)的，此時的游覽器會跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個位置（可能前進(jìn)可能后退）。小編一開始卻是也不知道這個，就自己試了一下，但是頁面就刷新了一下，并沒有匹配到頁面，小編試了好幾次，也換了好幾個游覽器也沒有成功，如果其他小伙們成功，還望留言告知。

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

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

將當(dāng)前URL和history.state加入到history中，并用新的state和URL替換當(dāng)前，不會造成頁面刷新。

--參數(shù)解釋
stateObject    //與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息，沒有特殊的情況下可以直接傳{}
title       //現(xiàn)在大多數(shù)瀏覽器不支持或者忽略這個參數(shù)，我們在用的時候建議傳一個空字符串
url            //這個參數(shù)提供了新歷史紀(jì)錄的地址,它不一定要是絕對地址，也可以是相對的，不可跨域

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

用新的state和URL替換當(dāng)前，不會造成頁面刷新。

--參數(shù)解釋
stateObject    //與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息，沒有特殊的情況下可以直接傳{}
title       //現(xiàn)在大多數(shù)瀏覽器不支持或者忽略這個參數(shù)，我們在用的時候建議傳一個空字符串
url            //這個參數(shù)提供了新歷史紀(jì)錄的地址,它不一定要是絕對地址，也可以是相對的，不可跨域

有些小伙伴們看到這里可能對stateObject這個參數(shù)不太清楚，下面我們舉個例子來體會這個stateObject是怎么回事。說到這個，我先說一下popstate事件，這個事件是干嘛的，或者怎樣才能觸發(fā)的，官方給我們的答案是：

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

可能很多人跟我一樣，看到這個解釋的時候一臉懵逼的，那我們就簡單的，哪些方法可以觸發(fā)這個popstate事件。下面打開這個鏈接https://www.lagou.com/gongsi/...（這個是拉勾網(wǎng)上我的公司主頁鏈接，順道幫忙打個廣告），在控制臺我們執(zhí)行下面這段代碼看看。

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:"華為"}

相信執(zhí)行這段代碼之后，你就更好理解了，沒什么是執(zhí)行一次代碼不能解決的，如果有那就多執(zhí)行幾次。
回到前面我拋出的問題，怎么替代window.location.replace()方法，可能不少小伙們已經(jīng)知道了，不知道的小伙們，我就貼一下例子：

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

/*
執(zhí)行完之后，我們發(fā)現(xiàn)不能回退了，是不是就跟window.location.replace()實(shí)現(xiàn)同樣的效果了。
*/

結(jié)語： 沒什么是執(zhí)行一次代碼不能解決的，如果有那就多執(zhí)行幾次。