popstate

当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

需要注意的是调用history.pushState()history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

常规信息

Specification
HTML5
Interface
PopStateEvent
Bubbles
Cancelable
Target
defaultView
Default Action

属性

Property Type Description
target 只读 EventTarget 浏览上下文 (<code>window</code>).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?
state 只读 any The current history entry's state object (if any).

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Yes 4.0 (2) 10.0 Yes limited
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 (buggy in 2.2 and 2.3) 4.0 (2) 10.0 Yes limited

示例

 打开http://example.com/example.html页面运行以下代码, 会按预期那样弹出alert提示。

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}

注意,虽然原始的历史项( http://example.com/example.html所对应的)没有关联的状态对象(state object),但稍后调用history.back()激活该历史项时,仍会触发popstate事件。

相关事件

也可以看看

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, HuarenYu, saviroyu, monjer, ziyunfei
 最后编辑者: xgqfrms-GitHub,