popstate事件监听

发表于 更新于 分类于

本文主要介绍 popstate 事件监听的作用。

pushState

在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。
pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的 URL 地址。

state object

状态对象是一个由 pushState()方法创建的、与历史纪录相关的 JS 对象。当用户定向到一个新的状态时，会触发 popstate 事件。事件的 state 属性包含了历史纪录的 state 对象。（译者注：总而言之，它存储 JSON 字符串，可以用在 popstate 事件中。）state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上，所以用户在重启浏览器之后这些 state 对象会恢复，我们施加一个最大 640k 的字符串在 state 对象的序列化表示上。如果你像 pushState() 方法传递了一个序列化表示大于 640k 的 state 对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用 sessionStorage 或者 localStorage。

title

火狐浏览器现在已经忽略此参数，将来也许可能被使用。考虑到将来有可能的改变，传递一个空字符串是安全的做法。当然，你可以传递一个短标题给你要转变成的状态。（译者注：现在大多数浏览器不支持或者忽略这个参数，最好用 null 代替）

URL

这个参数提供了新历史纪录的地址。请注意，浏览器在调用 pushState()方法后不会去加载这个 URL，但有可能在之后会这样做，比如用户重启浏览器之后。新的 URL 不一定要是绝对地址，如果它是相对的，它一定是相对于当前的 URL。新 URL 必须和当前 URL 在同一个源下;否则，pushState() 将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前 URL。

popstate

当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState()的调用创建的，或者受到对 history.replaceState()的调用的影响，popstate 事件的 state 属性包含历史条目的状态对象的副本。
需要注意的是调用 history.pushState()或 history.replaceState()不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在 Javascript 代码中调用 history.back()）
不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发(emit )popstate 事件，但 Firefox 则不会。

监听代码如下:

1
2
3
window.onpopstate = function (event) {
  alert("监听到历史记录条目已更改");
};

禁用浏览器返回按钮如下:

1
2
3
4
history.pushState(null, null, document.URL);
window.addEventListener("popstate", function () {
  history.pushState(null, null, document.URL);
});