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

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

location

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

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

接下來(lái)我們說(shuō)說(shuō)，基于location對(duì)象我們常用的一些操作。

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("&"):[];
        //存儲(chǔ)最后返回的對(duì)象
        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() //重新加載頁(yè)面

在調(diào)用reload()不傳任何參數(shù)時(shí)，頁(yè)面自上次請(qǐng)求以來(lái)并沒(méi)有改變過(guò)，頁(yè)面就會(huì)從游覽器緩存中加載，如果傳入?yún)?shù)true時(shí)，頁(yè)面會(huì)強(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)就不行了，用來(lái)實(shí)現(xiàn)過(guò)渡頁(yè)面時(shí)非常好用，但是有些webview卻是不支持的，比如小編在開(kāi)發(fā)的釘釘上的微應(yīng)用的時(shí)候就遇到這個(gè)，這時(shí)我們?cè)撊绾巫瞿兀肯旅婢褪俏覀冎v到的history對(duì)象。

history

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

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

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

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

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

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

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

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

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

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

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

popstate每次活動(dòng)歷史記錄條目在同一文檔的兩個(gè)歷史記錄條目之間改變時(shí)，將事件分派到窗口。

可能很多人跟我一樣，看到這個(gè)解釋的時(shí)候一臉懵逼的，那我們就簡(jiǎn)單的，哪些方法可以觸發(fā)這個(gè)popstate事件。下面打開(kāi)這個(gè)鏈接https://www.lagou.com/gongsi/...（這個(gè)是拉勾網(wǎng)上我的公司主頁(yè)鏈接，順道幫忙打個(gè)廣告），在控制臺(tái)我們執(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í)行這段代碼之后，你就更好理解了，沒(méi)什么是執(zhí)行一次代碼不能解決的，如果有那就多執(zhí)行幾次。
回到前面我拋出的問(wèn)題，怎么替代window.location.replace()方法，可能不少小伙們已經(jīng)知道了，不知道的小伙們，我就貼一下例子：

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

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

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