WindowEventHandlers.onpopstate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
WindowEventHandlers
混入(mixin)中的 onpopstate
属性是用于处理 window 对象上的 popstate
事件的事件处理程序。
每当激活同一文档中不同的历史记录条目时,popstate
事件就会在对应的 window
对象上触发。如果当前处于激活状态的历史记录条目是由 history.pushState()
方法创建的或者是由 history.replaceState()
方法修改的,则 popstate
事件的 state
属性包含了这个历史记录条目的 state
对象的一个拷贝。
备注:调用 history.pushState()
或者 history.replaceState()
不会触发 popstate
事件。popstate
事件只会在浏览器某些行为下触发,比如点击后退按钮(或者在 JavaScript 中调用 history.back()
方法)。即,在同一文档的两个历史记录条目之间导航会触发该事件。
语法
window.onpopstate = funcRef;
funcRef
是一个处理函数。
示例
假如当前网页地址为 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(); // 弹出 "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}
注意,即便是没有关联 state
对象的原始的历史条目(比如 http://example.com/example.html
),popstate
事件也仍会在我们第二次调用 history.back()
,激活这一历史条目后触发。
规范
Specification |
---|
HTML Standard # event-popstate |
HTML Standard # handler-window-onpopstate |
浏览器兼容性
BCD tables only load in the browser