已完本玄幻小说排行榜,好看的言情小说

主頁(yè) > 知識(shí)庫(kù) > 簡(jiǎn)單聊聊H5的pushState與replaceState的用法

簡(jiǎn)單聊聊H5的pushState與replaceState的用法

一、簡(jiǎn)介

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。這些方法通常與window.onpopstate 配合使用。

二、pushState() 方法的例子

假設(shè)在 http://mozilla.org/foo.html 中執(zhí)行了以下 JavaScript 代碼:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

這將使瀏覽器地址欄顯示為 http://mozilla.org/bar.html，但并不會(huì)導(dǎo)致瀏覽器加載 bar.html ，甚至不會(huì)檢查bar.html 是否存在。

假設(shè)現(xiàn)在用戶又訪問(wèn)了 http://google.com，然后點(diǎn)擊了返回按鈕。此時(shí)，地址欄將顯示 http://mozilla.org/bar.html，同時(shí)頁(yè)面會(huì)觸發(fā) popstate 事件，事件對(duì)象state中包含了 stateObj 的一份拷貝。頁(yè)面本身與 foo.html 一樣，盡管其在 popstate 事件中可能會(huì)修改自身的內(nèi)容。

如果我們?cè)俅吸c(diǎn)擊返回按鈕，頁(yè)面URL會(huì)變?yōu)閔ttp://mozilla.org/foo.html，文檔對(duì)象document會(huì)觸發(fā)另外一個(gè) popstate 事件，這一次的事件對(duì)象state object為null。這里也一樣，返回并不改變文檔的內(nèi)容，盡管文檔在接收 popstate 事件時(shí)可能會(huì)改變自己的內(nèi)容，其內(nèi)容仍與之前的展現(xiàn)一致。

三、pushState() 方法

pushState() 需要三個(gè)參數(shù): 一個(gè)狀態(tài)對(duì)象, 一個(gè)標(biāo)題 (目前被忽略), 和 (可選的) 一個(gè)URL. 讓我們來(lái)解釋下這三個(gè)參數(shù)詳細(xì)內(nèi)容：

狀態(tài)對(duì)象 — 狀態(tài)對(duì)象state是一個(gè)JavaScript對(duì)象，通過(guò)pushState () 創(chuàng)建新的歷史記錄條目。無(wú)論什么時(shí)候用戶導(dǎo)航到新的狀態(tài)，popstate事件就會(huì)被觸發(fā)，且該事件的state屬性包含該歷史記錄條目狀態(tài)對(duì)象的副本。

標(biāo)題 — 目前忽略這個(gè)參數(shù)被忽略，但未來(lái)可能會(huì)用到。傳遞一個(gè)空字符串在這里是安全的，而在將來(lái)這是不安全的。二選一的話，你可以為跳轉(zhuǎn)的state傳遞一個(gè)短標(biāo)題。

URL — 該參數(shù)定義了新的歷史URL記錄。注意，調(diào)用 pushState() 后瀏覽器并不會(huì)立即加載這個(gè)URL，但可能會(huì)在稍后某些情況下加載這個(gè)URL，比如在用戶重新打開瀏覽器時(shí)。新URL不必須為絕對(duì)路徑。如果新URL是相對(duì)路徑，那么它將被作為相對(duì)于當(dāng)前URL處理。新URL必須與當(dāng)前URL同源，否則 pushState() 會(huì)拋出一個(gè)異常。該參數(shù)是可選的，缺省為當(dāng)前URL。

四、pushState() 方法與設(shè)置hash值的區(qū)別

在某種意義上，調(diào)用 pushState() 與設(shè)置 window.location = "#foo" 類似，二者都會(huì)在當(dāng)前頁(yè)面創(chuàng)建并激活新的歷史記錄。但 pushState() 具有如下幾條優(yōu)點(diǎn)：

新的 URL 可以是與當(dāng)前URL同源的任意URL 。而設(shè)置 window.location 僅當(dāng)你只修改了哈希值時(shí)才保持同一個(gè)文件。

如果需要，可以不必改變URL就能創(chuàng)建一條歷史記錄。而設(shè)置 window.location = "#foo";,只有在當(dāng)前哈希不是 #foo 的情況下，才會(huì)創(chuàng)建一個(gè)新的歷史記錄項(xiàng)。

我們可以為新的歷史記錄項(xiàng)關(guān)聯(lián)任意數(shù)據(jù)。而基于哈希值的方式，則必須將所有相關(guān)數(shù)據(jù)編碼到一個(gè)短字符串里。

五、replaceState() 方法

history.replaceState() 的使用與 history.pushState() 非常相似，區(qū)別在于 replaceState() 是修改了當(dāng)前的歷史記錄項(xiàng)而不是新建一個(gè)。

六、popstate 事件

每當(dāng)處于激活狀態(tài)的歷史記錄條目發(fā)生變化時(shí),popstate 事件就會(huì)在對(duì)應(yīng)window對(duì)象上觸發(fā)。如果當(dāng)前處于激活狀態(tài)的歷史記錄條目是由history.pushState()方法創(chuàng)建,或者由history.replaceState()方法修改過(guò)的, 則popstate事件對(duì)象的state屬性包含了這個(gè)歷史記錄條目的state對(duì)象的一個(gè)拷貝。

我們也可以直接在history對(duì)象上獲取state，如下：

var currentState = history.state;

需要注意的是，調(diào)用 history.pushState() 或者 history.replaceState() 不會(huì)觸發(fā) popstate 事件。 opstate事件只會(huì)在瀏覽器某些行為下觸發(fā)，比如點(diǎn)擊后退、前進(jìn)按鈕(或者在JavaScript中調(diào)用history.back()、history.forward()、history.go()方法)。

七、popstate 事件的例子

假如當(dāng)前網(wǎng)頁(yè)地址為 http://example.com/example.html ,則運(yùn)行下述代碼后:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//綁定事件處理函數(shù). 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一個(gè)歷史記錄條目 http://example.com/example.html?page=1,條目索引為1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一個(gè)歷史記錄條目 http://example.com/example.html?page=2,條目索引為2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改當(dāng)前激活的歷史記錄條目 http://ex..?page=2 變?yōu)?http://ex..?page=3,條目索引為3
history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/example.html, state: null
history.go(2);  // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}

八、pushState()的用途

王二使用 pushState() 主要是它可以監(jiān)聽到瀏覽器上的返回事件，這在移動(dòng)端上也同樣適用，參考如下一段代碼(可以直接運(yùn)行）：

<body>
    <div>window.onpopstate可以監(jiān)聽到返回鍵事件</div>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //這里可以監(jiān)聽到瀏覽器的返回事件，并做你想做的事情，
            //例如：跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

當(dāng)然，用 window.onhashchange 也可以監(jiān)聽到瀏覽器上的返回事件，參考如下一段代碼(可以直接運(yùn)行）：

<body>
    <div>window.onhashchange可以監(jiān)聽到返回鍵事件</div>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：咸陽(yáng) 甘南紅河文山營(yíng)口惠州蘇州萍鄉(xiāng)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《簡(jiǎn)單聊聊H5的pushState與replaceState的用法》，本文關(guān)鍵詞簡(jiǎn)單,聊聊,的,pushState,與,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。