window屬性:onpopstate

2018-05-23 14:15 更新

onpopstate屬性

onpopstate屬性是窗口上popstate事件的事件處理程序。

popstate每當(dāng)活動(dòng)歷史記錄條目在同一文檔的兩個(gè)歷史記錄條目之間發(fā)生變化時(shí),就會(huì)將事件分派到窗口。如果激活的歷史記錄條目是通過(guò)調(diào)用history.pushState()創(chuàng)建的,或者受到history.replaceState()調(diào)用的影響,則該popstate事件的state屬性包含歷史記錄項(xiàng)的狀態(tài)對(duì)象的副本。

注意:調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate事件。該popstate事件僅通過(guò)執(zhí)行瀏覽器操作觸發(fā),如單擊“后退”按鈕(或JavaScript中調(diào)用history.back()),在同一文檔的兩個(gè)歷史記錄項(xiàng)之間進(jìn)行導(dǎo)航。

注意:用于處理popstate事件的瀏覽器在頁(yè)面加載時(shí)的方式不同,但現(xiàn)在它們的行為相同。Firefox從未在頁(yè)面加載時(shí)發(fā)出popstate事件,Chrome直到版本34才可以,而Safari一直到版本10.0。

onpopstate屬性語(yǔ)法

window.onpopstate = funcRef ;
  • funcRef是一個(gè)處理函數(shù)。

popstate事件

例如,運(yùn)行以下代碼的http://example.com/example.html中的頁(yè)面將按照指示生成警報(bào):

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

請(qǐng)注意,即使原始?xì)v史記錄項(xiàng)(for http://example.com/example.html)沒(méi)有與其關(guān)聯(lián)的狀態(tài)對(duì)象,但當(dāng)我們?cè)诘诙握{(diào)用history.back()后激活該現(xiàn)時(shí),仍然會(huì)觸發(fā)一個(gè)popstate事件。

規(guī)范

  • HTML5 popstate事件
以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)