window.onpopstate不工作; 当我导航回页面时没有任何反应

Question

我正在尝试在我网站上的一个页面上添加window.onpopstate,但什么也没发生.我把这个脚本放在页面上:

<script type="text/javascript">
  window.addEventListener('popstate', function(event) {
    if (event.state) {
      alert(event.state);
    }
  }, false);
</script>

我也尝试过:

<script type="text/javascript">
  window.onpopstate = function() {
    alert("popped!");
  }
</script>

但是当我导航回页面时,我没有收到任何警报.

Answer 1

popstate只有在添加一个或多个历史记录条目/条目以及稍后用户单击浏览器中的后退按钮时,才会获得事件.

通过向浏览器历史记录添加条目,您可以更改URL(就像用户导航到另一个页面一样),但不会实际加载新页面.

您使用pushState方法添加历史记录条目:

history.pushState({}, '', '/newpage');

当您添加一个条目,用户点击后面的URL切换回前一个但未装载在该地址的页面.一个popstate事件,而不是触发.

请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

例外:

较旧的浏览器不支持popstate事件和操纵浏览器的历史记录.

某些浏览器(例如Safari)popstate在实际加载页面时也会触发事件.