Chrome 中页面加载时的 Popstate

Question

我正在为我的网络应用程序使用 History API，但遇到一个问题。 我执行 Ajax 调用来更新页面上的一些结果，并使用 history.pushState() 来更新浏览器的地址栏，而无需重新加载页面。然后，当然，我使用 window.popstate 以便在单击后退按钮时恢复之前的状态。

这个问题是众所周知的——Chrome 和 Firefox 对待 popstate 事件的方式不同。虽然 Firefox 不会在第一次加载时启动它，但 Chrome 会。我想要 Firefox 风格，而不是在加载时触发事件，因为它只是更新与加载时完全相同的结果。除了使用 History.js 之外还有其他解决方法吗？我不想使用它的原因是——它本身需要太多的 JS 库，而且由于我需要在已经有太多 JS 的 CMS 中实现它，所以我想尽量减少放入其中的 JS 。

因此，我想知道是否有一种方法可以让 Chrome 在加载时不启动 popstate，或者，也许有人尝试使用 History.js，因为所有库都混合到一个文件中。

Answer 1

在 Google Chrome 版本 19 中，@spliter 的解决方案停止工作。正如@johnnymire 指出的，Chrome 19 中的history.state 存在，但它是空的。

我的解决方法是添加 window.history.state !== null 来检查 window.history 中是否存在状态：

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

我在所有主要浏览器以及 Chrome 版本 19 和 18 中测试了它。作品。

Answer 2

如果您不想对添加到 onpopstate 的每个处理程序采取特殊措施，我的解决方案可能对您感兴趣。该解决方案的一大优点还在于可以在页面加载完成之前处理 onpopstate 事件。

只需在添加任何 onpopstate 处理程序之前运行此代码一次，一切都应该按预期工作（也称为 Mozilla ^^）。

(function() {
    // There's nothing to do for older browsers ;)
    if (!window.addEventListener)
        return;
    var blockPopstateEvent = document.readyState!="complete";
    window.addEventListener("load", function() {
        // The timeout ensures that popstate-events will be unblocked right
        // after the load event occured, but not in the same event-loop cycle.
        setTimeout(function(){ blockPopstateEvent = false; }, 0);
    }, false);
    window.addEventListener("popstate", function(evt) {
        if (blockPopstateEvent && document.readyState=="complete") {
            evt.preventDefault();
            evt.stopImmediatePropagation();
        }
    }, false);
})();

工作原理：

Chrome、Safari 以及其他可能的 webkit 浏览器会在文档加载后触发 onpopstate 事件。这不是有意的，因此我们阻止 popstate 事件，直到加载文档后的第一个事件循环 cicle。这是通过 PreventDefault 和 stopImmediatePropagation 调用来完成的（与 stopPropagation 不同，stopImmediatePropagation 会立即停止所有事件处理程序调用）。

但是，由于当 Chrome 错误地触发 onpopstate 时，文档的 readyState 已经处于“完成”状态，因此我们允许在文档加载完成之前触发的 opopstate 事件，以允许在文档加载之前调用 onpopstate。

更新 2014-04-23： 修复了以下错误：如果在页面加载后执行脚本，则 popstate 事件会被阻止。

Answer 3

仅使用 setTimeout 不是正确的解决方案，因为您不知道加载内容需要多长时间，因此可能会在超时后发出 popstate 事件。

这是我的解决方案：
https://gist.github.com/3551566

/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
  setTimeout(function() {
    window.addEventListener('popstate', function() {
      ...
    });
  }, 0);
});

Answer 4

解决方案已在 jquery.pjax.js 中找到第 195-225 行：

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href


// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if ( initialPop ) return

  var state = event.state

  if ( state && state.pjax ) {
    var container = state.pjax
    if ( $(container+'').length )
      $.pjax({
        url: state.url || location.href,
        fragment: state.fragment,
        container: container,
        push: false,
        timeout: state.timeout
      })
    else
      window.location = location.href
  }
})

Answer 5

比重新实现 pjax 更直接的解决方案是在 pushState 上设置一个变量，并检查 popState 上的变量，因此初始 popState 不会在加载时不一致地触发（不是特定于 jquery 的解决方案，只是将其用于事件）：

$(window).bind('popstate', function (ev){
  if (!window.history.ready && !ev.originalEvent.state)
    return; // workaround for popstate on load
});

// ... later ...

function doNavigation(nextPageId) {
  window.history.ready = true;

  history.pushState(state, null, 'content.php?id='+ nextPageId); 
  // ajax in content instead of loading server-side
}

Answer 6

Webkit 的初始 onpopstate 事件没有分配状态，因此您可以使用它来检查不需要的行为：

window.onpopstate = function(e){
    if(e.state)
        //do something
};

一个允许导航回原始页面的全面解决方案将建立在这个想法之上：

<body onload="init()">
    <a href="page1" onclick="doClick(this); return false;">page 1</a>
    <a href="page2" onclick="doClick(this); return false;">page 2</a>
    <div id="content"></div>
</body>

<script>
function init(){
   openURL(window.location.href);
}
function doClick(e){
    if(window.history.pushState)
        openURL(e.getAttribute('href'), true);
    else
        window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
    document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser'); 
    if(window.history.pushState){
        if(push)
            window.history.pushState({href: href}, 'your page title', href);
        else
            window.history.replaceState({href: href}, 'your page title', href);
    }
}
window.onpopstate = function(e){
    if(e.state)
        openURL(e.state.href);
};
</script>

虽然这个 < em>仍然可以触发两次（使用一些漂亮的导航），它可以通过检查之前的 href 来简单地处理。

Answer 7

这是我的解决方法。

window.setTimeout(function() {
  window.addEventListener('popstate', function() {
    // ...
  });
}, 1000);

Answer 8

这是我的解决方案：

var _firstload = true;
$(function(){
    window.onpopstate = function(event){
        var state = event.state;

        if(_firstload && !state){ 
            _firstload = false; 
        }
        else if(state){
            _firstload = false;
            // you should pass state.some_data to another function here
            alert('state was changed! back/forward button was pressed!');
        }
        else{
            _firstload = false;
            // you should inform some function that the original state returned
            alert('you returned back to the original state (the home state)');
        }
    }
})   

Answer 9

让 Chrome 在页面加载时不触发 popstate 的最佳方法是投票 https://code.google.com/p/chromium/issues/detail?id=63040。他们已经知道 Chrome 不符合 HTML5 规范已经整整两年了，但仍然没有修复它！

Answer 10

如果使用 event.state !== null 在历史记录中返回到第一个加载的页面在非移动浏览器中将不起作用。
我使用 sessionStorage 来标记 ajax 导航何时真正开始。

history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;

window.addEventListener('popstate', function(e) {
    if (sessionStorage.ajNavStarted) {
        location.href = (e.state === null) ? location.href : e.state;
    }
}, false);

Answer 11

所提出的解决方案在页面重新加载时存在问题。以下似乎效果更好，但我只测试了 Firefox 和 Chrome。它使用了现实情况，即e.event.state 和window.history.state 之间似乎存在差异。

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

Answer 12

我知道你反对它，但你真的应该使用 History.js，因为它可以解决一百万个浏览器不兼容问题。我采用了手动修复路线，后来发现问题越来越多，只有在路上你才能发现。现在确实没那么难了：

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

阅读 https://github.com/browserstate/history 上的 api .js

Answer 13

这为我解决了问题。我所做的只是设置一个超时函数，该函数将函数的执行延迟足够长的时间，以错过页面加载时触发的 popstate 事件

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

Answer 14

您可以创建一个事件并在 onload 处理程序之后触发它。

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

请注意，这在 Chrome/Safari 中略有问题，但我已将补丁提交到 WebKit，它应该很快就会可用，但这是“最正确”的方式。

Answer 15

这在 Firefox 和 Chrome 中对我有用

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};