javascript popstate 什么时候触发?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6129170/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:35:43  来源:igfitidea点击:

When does popstate fire?

javascripthtml

提问by Matthew

I put all of my code in $(document).ready as per norm, but should I put my 'popstate' listener at the very end of this code too? Or does it matter?

我按照规范将所有代码放在 $(document).ready 中,但是我是否也应该将我的“popstate”侦听器放在此代码的最后?或者有关系吗?

回答by Eli

This doesn't really matter, and since it's an event, can even be done before your readymethod. The only thing needing to be placed inside document readyis code interacting with the DOM. Everything else doesn't (and possibly shouldn't) be placed in document ready.

这并不重要,因为它是一个事件,甚至可以在您的ready方法之前完成。唯一需要放在里面的document ready是与 DOM 交互的代码。其他所有内容都不会(也可能不应该)放在文档中。

Example:

例子:

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
});

Now when popstate actually is triggered is a lot different than when it is bound. According to the Mozilla doc:

现在,实际触发 popstate 时与绑定时有很大不同。根据 Mozilla 文档:

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

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

回答by zod

I was confused, because popstate was firing on every page load (I use chrome).

我很困惑,因为 popstate 在每个页面加载时都会触发(我使用 chrome)。

From https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate:

来自https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

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 不会。

So in chrome (and apparently safari), the jquery ready method will execute, followed by the popstate event. i.e. it doesn't matter if you attach the event within ready (or body.onload for that matter), the popstate event will happen after your ready method is complete.

因此,在 chrome(显然是 safari)中,将执行 jquery ready 方法,然后是 popstate 事件。即,如果您将事件附加在就绪(或 body.onload 内)内无关紧要,popstate 事件将在您的就绪方法完成后发生。

In firefox (16.0.1) the popstate event does not fire on page loads (I can't test IE 10).

在 firefox (16.0.1) 中,popstate 事件不会在页面加载时触发(我无法测试 IE 10)。

回答by evyevy

Just add a key to the state every time you push to history or replacing the state, and check for it on the popstate event, if you don't use the state at all you can simply push {} as state and quit the pop state in case the event.state is null.

每次推送到历史记录或替换状态时,只需在状态中添加一个键,并在 popstate 事件上检查它,如果根本不使用状态,则可以简单地将 {} 作为状态推送并退出 pop 状态如果 event.state 为空。

回答by Farhad Azarbarzinniaz

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Calling history.pushState()or history.replaceState()won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back()in JavaScript), when navigating between two history entries for the same document.

调用history.pushState()orhistory.replaceState()不会触发 popstate 事件。history.back()当在同一文档的两个历史条目之间导航时,popstate 事件仅通过执行浏览器操作触发,例如单击后退按钮(或在 JavaScript 中调用)。