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() 方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。

语法

js
window.onpopstate = funcRef;
  • funcRef 是一个处理函数。

示例

假如当前网页地址为 http://example.com/example.html，则运行下述代码将触发警告对话框：

js
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

参见