HTML5無刷新實現跳轉頁面技術

window.onpopstate

window.onpopstate是popstate事件在window對象上的事件句柄.

每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發. 如果當前處於激活狀態的歷史記錄條目是由history.pushState()方法創建,或者由history.replaceState()方法修改過的, 則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝.

調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在其他瀏覽器操作時觸發, 比如點擊后退按鈕(或者在JavaScript中調用history.back()方法).

當網頁加載時,各瀏覽器對popstate事件是否觸發有不同的表現,Chrome 和 Safari會觸發popstate事件, 而Firefox不會.

語法

01	window.onpopstate = funcRef;

popstate事件

假如當前網頁地址為http://example.com/example.html,則運行下述代碼后:

01	window.onpopstate = function(event) {

02	alert("location: " + document.location + ", state: " + JSON.stringify(event.state));

03

};

04	//綁定事件處理函數.

05	history.pushState({page: 1}, "title 1", "?page=1");    //添加並激活一個歷史記錄條目http://example.com/example.html?page=1,條目索引為1

06	history.pushState({page: 2}, "title 2", "?page=2");    //添加並激活一個歷史記錄條目http://example.com/example.html?page=2,條目索引為2

07

08	history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目http://ex..?page=2 變為 http://ex..?page=3,條目索引為2

09	history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"

10	history.back(); // 彈出 "location: http://example.com/example.html, state: null

11	history.go(2);  // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}

即便進入了那些非pushState和replaceState方法作用過的(比如http://example.com/example.html)沒有state對象關聯的那些網頁, popstate事件也仍然會被觸發.