一、popstate

触发条件：

• 在同一文档的两个历史记录条目之间导航会触发该事件，比如点击后退按钮（或者在 JavaScript 中调用 history.back() 方法）

  • mdn-onpopstate

  • 回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）

  • 调用 history.pushState() 或者 history.replaceState() 不会触发

  • 即便是没有关联 state 对象的原始的历史条目，popstate 事件也仍会在我们第二次调用 history.back()，激活这一历史条目后触发。

  • 不同的浏览器在加载页面时处理popstate事件的形式存在差异。案例分析

二、pushState

• 在历史记录中增加一条新的记录

  • mdn-History.pushState

  • pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。使用该方法之后，就可以用History.state属性读出状态对象。

  • 如果pushState的 URL 参数设置了一个新的锚点值（即hash），并不会触发hashchange事件。反过来，如果 URL 的锚点值变了，则会在 History 对象创建一条浏览记录。

  • 使用 history.pushState() 会改变 referrer 的值，而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。referrer的值则是创建 XMLHttpRequest 对象时所处的窗口的URL。

• 参数

  • state：与要跳转到的URL对应的状态信息

  • title：可以不传

  • url：要跳转到的URL地址，不能跨域

三、replaceState

• 将当前的历史记录给替换掉

  • mdn-History.replaceState

  • History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。

应用

• popstate 与 pushstate 组合实现监听用户点击返回键时触发的事件，单独使用并不能实现监听用户退出的功能

  • 为什么前端通过 pushstate 和 popstate 的组合来监听用户返回事件

  • chromium 加载url 过程简析

  • Chromium网页URL加载过程分析

代码片段：

window.onload = function() {
    history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function(e) {
        // 代码
    }, false);
};

扩展：History

• History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式

  • mdn-History API