我有一个简单的网页,即：
<html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>History hacks</title> <script> window.onpopstate = function (e) { alert("location: " + document.location + ",state: " + JSON.stringify(e.state)); } window.onload = function (e) { alert('page loaded'); } </script> </head> <body> <p> <a href="http://www.yahoo.com">Yahoo</a> <a href="#part1">Part 1</a></p> </body> </html>
现在关于Chrome和Firefox如何触发popstate事件有很多不同之处(当我开始测试IE时,我不禁想到我正在反对的事情),但是在这里给我带来问题的是Chrome会触发一个popstate只要我点击这两个链接中的任何一个,然后当我点击后退按钮时再次发生事件. Firefox将触发更改散列部分的链接事件(仅在哈希链接相同时才第一次),如果单击Yahoo链接然后单击后退按钮,则根本不会触发它.
那么有一种方法我可以在Firefox中告诉用户刚刚点击回来并从另一个域上的完全不同的站点返回我的页面吗？还有另一个可以在Firefox中用于此目的的事件吗？ (当我从yahoo.com返回时,加载事件不会被触发.)
解决方法
要使用后退(或前进)按钮进入初始页面加载时获取popstate事件,请使用replaceState()之类的
window.onload = function(e) {
history.replaceState(null,null,document.URL);
}
要忽略Chrome在加载页面时生成的初始popstate,您可以在调用pushState / replaceState时标记状态,例如
history.pushState({myTag: true},url);
然后你的popstate处理程序只过滤myTag
window.onpopstate = function(e) {
if (!e.state.myTag) return; // none of my business
// code to handle popstate
}
您可以将这两者结合起来,实现一个简单的跨浏览器解决方案：
window.onpopstate = function(e) {
if (!e.state.myTag) return; // none of my business
// code to handle popstate
}
window.onload = function(e) {
history.replaceState({myTag: true},document.URL);
}
@Boris Zbarsky详细介绍了bfcache.我没有想过如何将它与我的方法结合起来.我只是在adding a page unload handler之前禁用它
window.onunload = function(e) { }
