javascript 页面加载时的 HTML5 onpopstate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3700440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 onpopstate on page load
提问by epoch
I'm using the new HTML5 onpopstate event. Using Firefox 4 the window.onpopstate event is triggered on a page load whilst in Webkit this does not seem to be the case.
我正在使用新的 HTML5 onpopstate 事件。使用 Firefox 4，window.onpopstate 事件在页面加载时触发，而在 Webkit 中似乎并非如此。
Which is the correct behaviour?
哪个是正确的行为？
采纳答案by Delan Azabani
The popstate event is fired in certain cases when navigating to a session history entry.
在导航到会话历史记录条目时，在某些情况下会触发 popstate 事件。
http://www.whatwg.org/specs/web-apps/current-work/#event-popstate
http://www.whatwg.org/specs/web-apps/current-work/#event-popstate
From my understanding, though I could be wrong, seeing as loading the page does mean history is created and traversed to, yes, it should be fired on page load.
根据我的理解，虽然我可能是错的，但看到加载页面确实意味着创建并遍历历史记录，是的，它应该在页面加载时触发。
Also see,
还看到，
http://www.mail-archive.com/[email protected]/msg19722.html
http://www.mail-archive.com/[email protected]/msg19722.html
and,
和，
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
回答by Robert Calhoun
Firing onpopstate on page load is correct, and WebKit will have this behavior soon. WebKit 534.7 (Chrome 7.0517.44) now behaves this way.
在页面加载时触发 onpopstate 是正确的，WebKit 很快就会有这种行为。WebKit 534.7 (Chrome 7.0517.44) 现在表现得如此。
I filed a Chrome bug on it, but it turns out this is the desired behavior; it is needed in order to handle certain back/forward button actions correctly. See this bug report at code.google.comfor more discussion and links.
我在上面提交了一个 Chrome 错误，但事实证明这是所需的行为；它是正确处理某些后退/前进按钮操作所必需的。有关更多讨论和链接，请参阅code.google.com 上的此错误报告。
I'm still trying to come up with a good code pattern for an onpopstate event handler.
我仍在尝试为 onpopstate 事件处理程序提出一个好的代码模式。
回答by fiatjaf
I don't know if is this what you are asking, but my solution for an ajax-onlyonpopstate event handler is to set up to truea variable refreshedon window.onloadand set it to falseon history.pushStatecalls; then on the onpopstatehandler just do stuff if refreshedis false.
我不知道这是否是您要问的，但我对仅限 ajax 的onpopstate 事件处理程序的解决方案是设置true一个变量refreshedonwindow.onload并将其设置为falseonhistory.pushState调用；然后在onpopstate处理程序上做一些事情，如果refreshed是false。
Looks silly, and it is, but I couldn't do any better.
看起来很傻，确实如此，但我不能做得更好。
回答by user1895890
Just solved this issue, and the fix is actually quite simple. Firefox doesn't fire onpopstate on initial page load. After you fire a popstate, return false or prevent default on the page.load action, and you're golden.
刚刚解决了这个问题，修复其实很简单。Firefox 在初始页面加载时不会触发 onpopstate。在您触发 popstate 后，在 page.load 操作中返回 false 或阻止默认值，您就成功了。
Cheers.
干杯。
In action here: www.thecoffeeshopnyc.com
在这里行动：www.thecoffeeshopnyc.com
// Write in a new handler for Firefox, which does not fire popstate on load.
// Modern Webkit browsers fire popstate on load. The event handler below fires the controller
$(window).load(function () {
if ($.browser.mozilla) {
// Your func.
}
})
// Add the event listener. If the above is false, it will still run as intended in normal browsers.
window.onpopstate = function() {
// Your func.
}
回答by incarnate
In case someone is interested, I've came up with a decent pattern for working with onpopstate(this code assumes jQuery, feature detection checks are stripped for clarity):
如果有人感兴趣，我想出了一个合适的模式来使用onpopstate（这段代码假设使用 jQuery，为了清晰起见，功能检测检查被剥离了）：
$(function() {
// 1. Add initial state to current history record on page load.
var href = location.href;
history.replaceState({"href": href}, null, href);
// 2. Now attach the popstate handler.
window.onpopstate = function(ev) {
// Raised on page load this event will still contain no state.
var state = ev.state;
if (state && state.href) {
// 3. Add your logic, use `state` and `state.href` as you see fit.
}
};
});
回答by Rob
Browsers tend to handle the popstate event differently on page load. Chrome and Safari always emit a popstate event on page load, but Firefox doesn't.
浏览器倾向于在页面加载时以不同的方式处理 popstate 事件。Chrome 和 Safari 总是在页面加载时发出 popstate 事件，但 Firefox 不会。
This quote was taken from Mozilla's documentation: https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate
此引述取自 Mozilla 的文档：https: //developer.mozilla.org/en-US/docs/DOM/window.onpopstate
I tend to agree with the Mozilla system. Page load is not an action that requires an extra popstate event to be fired, because the state is not being popped, it is being loaded for the first time.
我倾向于同意 Mozilla 系统。页面加载不是需要触发额外 popstate 事件的操作，因为状态不是被弹出，而是第一次加载。
I am guessing Webkit is doing it for convenience... in all my implementations, it is consistently an inconvenience to delay loading my handler until after the initial popstate has fired.
我猜 Webkit 这样做是为了方便......在我所有的实现中，延迟加载我的处理程序直到初始 popstate 触发之后一直很不方便。
Instead of this (using pseudo functions):
而不是这个（使用伪函数）：
AddEventHandler(window, 'popstate', OnPopState);
I have to do something like this:
我必须做这样的事情：
AddLoadEvent(window.setTimeout(function()
{
AddEventHandler(window, 'popstate', OnPopState);
},0));
