PopStateEvent - popstate 事件的事件处理程序

PopStateEvent 是窗口上 popstate 事件的事件处理程序。

每当活动历史记录条目在同一文档的两个历史记录条目之间更改时，就会在窗口上调度 popstate 事件。如果要激活的历史记录条目是通过调用 history.pushState() 创建的，或者受到了调用 history.replaceState() 的影响，则 popstate 事件的 state 属性包含历史记录条目的 state 对象的副本。

注意：仅调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。仅通过执行浏览器操作（例如单击后退按钮（或在 JavaScript 中调用 history.back()）才能触发 popstate 事件。并且仅当用户在同一文档的两个历史记录条目之间导航时才触发该事件。

注意：浏览器过去在页面加载时处理 popstate 事件的方式不同，但是现在它们的行为相同。 Firefox 从不在页面加载时发出 popstate 事件。而 Chrome 一直到 34 版，Safari 直到 10.0 版之前都会。

语法

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(); // 弹出 "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}

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

规范

规范	状态	备注
HTML Living Standard PopStateEvent 的定义	现行的标准	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 处理浏览器历史记录
• Ajax 导航示例