WindowEventHandlers.onpopstate

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

参见