javascript - 为所有浏览器处理 window.onpopstate 的理想方法是什么？

Question

对于 chrome，该事件会在页面加载时触发，但在 Firefox 中，它只会在您按下后退或前进按钮时才会触发。那么如何编写一个适用于所有浏览器的脚本呢？

Answer 1

我会在这个上进行浏览器检测（事实上，我做过）。我正在使用 jquery 的 .data() 设置一个布尔标志来测试：

// chrome fires a popstack event on page load, so do a check before proceeding
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if( is_chrome && !$('body').data('allow-popstate-action') ) {
    $('body').data('allow-popstate-action', true);
    return false;
}

我在绑定到 popstate 事件的函数中添加了这个条件子句，所以第一次在 Chrome 中调用它（在页面加载时），它只是退出函数而不做任何事情。下一次（上一个/后退按钮），它将正常工作。

我在这个项目中使用旧版本的 jQuery，所以我不能使用 jQuery.browser.webkit，但你可能可以。

Answer 2

稍微优雅一点的方法是在添加 popstate 侦听器之前添加 1ms 超时。由于初始 popstate 将在任何异步代码执行之前触发，因此您的 popstate 函数将正常工作（仅在前进/后退操作上）：

window.setTimeout(function(){
    $(window).on('popstate', function(event){
        // do things
    });
}, 1);