logo标签列表

popstate事件什么时候触发？

javascripthtml
9

根据惯例，我将所有代码放在$(document).ready中，但是我的“popstate”监听器也应该放在代码的最后吗？或者这很重要吗？

请原谅我，popstate是什么？ - Ibu
希望你知道 onpopstate 并非所有浏览器都支持：http://caniuse.com/#search=history - Matt
在Chrome中，当页面首次加载时也会触发popstate事件（我还没有在Firefox中测试过）。 - Matthew
您在帖子中提出了两个不同的问题（放置，影响），并在标题中提出了第三个问题（顺序）。看起来有些答案没有回答所有的三个问题。您能否澄清您所追求的是什么？个人认为事件触发的顺序是关键问题（特别是如果不同的浏览器在触发popstate事件时有不同的顺序或情况，似乎这可能是一种情况）。 - jinglesthula
4个回答
2

这并不是很重要，而且由于它是一个事件，甚至可以在你的ready方法之前执行。唯一需要放置在document ready中的是与DOM交互的代码。其他所有内容都不需要（可能也不应该）放置在document ready中。

例如：

window.onpopstate = function() {
    // binding this event can be done anywhere, 
    // but shouldn't be inside document ready
};

$(document).ready(function() {
    // DOM manipulation and other stuff
});

实际触发popstate事件的时间与其绑定时大不相同。根据Mozilla文档:

每次激活历史记录条目更改时，都会向窗口分派一个popstate事件。如果要激活的历史记录条目是通过调用history.pushState()创建的或者受到调用history.replaceState()的影响，则popstate事件的state属性包含历史记录条目状态对象的副本。

一个例外是，如果你正在使用document.ready将jQuery别名为$（例如jQuery(function($){...code...});），那么你需要使用匿名函数来进行别名操作：(function($){...code...})(jQuery); - zzzzBov
同意，虽然我不知道有谁会使用文档就绪来实现这个目的。 - Eli
2
我不认为这仍然是正确的：“它将当前历史记录条目更改为用户访问的上一页，或者如果使用history.pushState()添加历史记录条目到历史记录堆栈中，则使用该历史记录条目”。我理解这意味着pushState()触发了它。 - webstackdev
1
我感到困惑，因为 popstate 在每次页面加载时都会触发（我使用的是 Chrome）。
从 https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate 中可以看到：

浏览器在处理页面加载时通常会以不同的方式处理 popstate 事件。 Chrome 和 Safari 总是在页面加载时发出 popstate 事件，但 Firefox 不会。

所以在 Chrome（和显然是 Safari）中，jquery 的 ready 方法将被执行，然后是 popstate 事件。 也就是说，无论您在 ready 中附加事件（或者在 body.onload 中），popstate 事件都会在 ready 方法完成后发生。
在 Firefox（16.0.1）中，popstate 事件不会在页面加载时触发（我无法测试 IE 10）。
1
在Chrome浏览器的(45.0.2454.93)版本中，它不再在页面加载时触发。 - GoTo
0
每次将历史记录推入或替换状态时，只需向状态添加一个键，并在popstate事件上检查它。如果您根本不使用状态，则可以将{}作为状态推送并退出pop state（在事件状态为null的情况下）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接