Question

我正在玩window.onpopstate，有一件事让我很烦恼：

浏览器倾向于在页面加载时以不同方式处理popstate事件。 Chrome和Safari总是在页面加载时发出popstate事件，但是 Firefox没有。

我测试了它，是的，在Chrome和Safari 5.1+中，popstate事件在页面加载时触发，但不在Firefox或IE10中触发。

问题是，我只想收听用户点击后退或转发按钮的popstate个事件（或者通过javascript更改了历史记录）），但不想在页面加载上做任何事情。

换句话说，我想将popstate事件与页面加载与其他popstate事件区分开来。

这是我到目前为止所尝试的（我正在使用jQuery）：

$(function() {
  console.log('document ready');

  setTimeout(function() {
    window.onpopstate = function(event) {
      // Do something here
    }, 10);
});

基本上我尝试将listener函数绑定到popstate的时间足够晚，以便在页面加载时没有绑定，只是稍后。

这似乎有效，但是，我不喜欢这个解决方案。我的意思是，我如何确定为setTimeout选择的 timeout 足够大，但不是太大（因为我不希望它等待太多）。

我希望有一个更智能的解决方案！

Answer 1

检查event.state事件处理程序中popstate的布尔真值：

window.addEventListener('popstate', function(event) {
    if (event.state) {
        alert('!');
    }
}, false);

要确保此功能正常，始终会在调用null或history.pushState()时指定非history.replaceState()州参数。另外，请考虑使用像History.js这样的包装器库，它可以跨浏览器提供一致的行为。

Answer 2

我遇到了类似的问题，我必须验证以确保页面是否已完全加载。

我使用过这样的东西：

var page_loaded = false;    
window.onpopstate = function(event){
    if(!page_loaded){
       page_loaded = true;
       return false;
     }
    //Continue With Your Code
}

Answer 3

要对popstate事件做出反应，您需要将某些状态推送到会话历史记录中。

例如，将此行添加到文档就绪部分：

history.pushState(null, null, window.location.pathname);

不理想，但它也适用于Chrome，Firefox和其他浏览器。

当用户点击后退或转发按钮时，该事件也会被正确触发，同时history.back()，history.forward()，{{1}方法是手动调用的。每次调用history.go()时，您必须再次推送另一个状态才能使其正常工作。

另见：

Answer 4

从今天开始，似乎没有任何浏览器在页面加载时发出该事件：

浏览器过去在页面加载时处理popstate事件的方式不同，但是现在它们的行为相同。 Firefox从不在页面加载时发出popstate事件。 Chrome一直使用到34版，而Safari直到10.0版。

来源：https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent

如何在页面加载时忽略window.onpopstate？

4 个答案: