onpopstate属性

onpopstate属性是窗口上popstate事件的事件处理程序。

popstate每当活动历史记录条目在同一文档的两个历史记录条目之间发生变化时，就会将事件分派到窗口。如果激活的历史记录条目是通过调用history.pushState()创建的，或者受到history.replaceState()调用的影响，则该popstate事件的state属性包含历史记录项的状态对象的副本。

注意：调用history.pushState()或history.replaceState()不会触发popstate事件。该popstate事件仅通过执行浏览器操作触发，如单击“后退”按钮（或JavaScript中调用history.back()），在同一文档的两个历史记录项之间进行导航。

注意：用于处理popstate事件的浏览器在页面加载时的方式不同，但现在它们的行为相同。Firefox从未在页面加载时发出popstate事件，Chrome直到版本34才可以，而Safari一直到版本10.0。

onpopstate属性语法

window.onpopstate = funcRef ;

• funcRef是一个处理函数。

popstate事件

例如，运行以下代码的http://example.com/example.html中的页面将按照指示生成警报：

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}

请注意，即使原始历史记录项（for http://example.com/example.html）没有与其关联的状态对象，但当我们在第二次调用history.back()后激活该现时，仍然会触发一个popstate事件。

规范

• HTML5 popstate事件