我正在为我的网络应用程序使用History API,但有一个问题.我执行Ajax调用以更新页面上的一些结果并使用history.pushState()来更新浏览器的位置栏而不重新加载页面.然后,当然,我使用window.popstate来恢复单击后退按钮时的先前状态.
问题是众所周知的 - Chrome和Firefox以不同的方式对待popstate事件.虽然Firefox没有在第一次加载时启动它,但Chrome确实如此.我想拥有Firefox风格并且不会在加载时触发事件,因为它只是在加载时使用完全相同的结果更新结果.除了使用History.js之外是否有解决方法？我不想使用它的原因是 - 它本身需要太多的JS库,因为我需要在已经有太多JS的CMS中实现它,我想最小化JS我放入它.
所以,想知道是否有办法让Chrome不加载'popstate'加载,或者有人试图使用History.js,因为所有库一起混合成一个文件.
我正在玩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选择的超时足够大,但不是太大(因为我不希望它等待太多).
我希望有一个更智能的解决方案!
我正在为History API编写一个小程序.我正在努力解决这个问题:
$(window).bind('popstate',
function(event) {
console.log('pop: ' + event.state);
});
当我点击"上一步"按钮时,它会记录'pop:undefined'
但是,如果我这样做,事情就像预期的那样:
window.onpopstate = function(event) {
console.log('pop: ' + event.state);
};
它这次记录'pop:[object Object]'...
所以就像jQuery没有将事件对象传递给回调.
jQuery有问题吗？或者我弄乱了什么？