如果没有用户交互，Chrome Popstate不会在“后退按钮"上触发 [英] Chrome popstate not firing on Back Button if no user interaction

问题描述

我正在尝试使用"pushState"和"popstate"事件来捕获后退"按钮导航，但是，尽管popstate事件在Firefox中可以正确触发，但在Chrome(版本76.0.3809.87(官方内部版本)中不会触发)(64位))如果没有用户互动.

I'm trying to use "pushState" and the "popstate" event to trap Back button navigation, however, while the popstate event triggers correctly in Firefox, it doesn't trigger in Chrome (Version 76.0.3809.87 (Official Build) (64-bit)) if there is no user interaction.

通过测试，看来popstate事件仅在用户与页面进行交互(即单击文档上的某个位置)时才被触发.因此，如果您加载页面而不进行交互并单击Back，则不会调用popstate函数.

From testing, it looks like the popstate event only gets triggered if the user interacts with the page (ie. clicks somewhere on the document). So if you load the page without interacting and hit Back, the popstate function is not called.

我添加了一个小提琴来演示此内容: https://jsfiddle.net/0xwvLndu/

I've added a Fiddle to showcase this: https://jsfiddle.net/0xwvLndu/

要在Chrome中测试小提琴，只需点击链接并点击后退"按钮.您不会看到任何警报.然后再次单击链接，但是这次单击Fiddle文档上的任意位置，然后单击上一步"按钮，然后触发警报.

To test the Fiddle in Chrome, just click the link and hit the Back button. You'll see no alert. Then click the link again but this time click anywhere on the Fiddle document and then hit the Back button, the alert is then triggered.

我在Chromium论坛上发现了一个与此古怪的话题有关的讨论，也许是为了防止滥用历史记录条目- https://github.com/WICG/interventions/issues/21#issuecomment-425609246

I found a discussion on the Chromium forum that may relate to this quirk, and perhaps this has been implemented to prevent abuse of history entries - https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/OCS7g72HtyI and https://github.com/WICG/interventions/issues/21#issuecomment-425609246

如果是这种情况，是否意味着就不能再依赖popstate来捕获后退"按钮动作了，如果可以，是否有解决方案?

If this is the case, does it mean that popstate cannot be relied on anymore to trap Back button actions, and if so, is there a work around solution?

下面是我正在测试的示例:

Below is an example of what I've been testing with:

window.addEventListener('load', function() {
    history.pushState(null, null, document.URL);
});

window.addEventListener('popstate', function(event) {
    alert('test');
});

我希望无论与用户的交互如何，都会在后退按钮"上触发警报，但这在Chrome中不会发生.

I expected the alert to be triggered on Back Button regardless of user interaction, but this does not happen in Chrome.

推荐答案

尝试将setTimeout添加为0

Try adding a setTimeout of 0

window.onpopstate = () => setTimeout(alert("Pop"), 0);

在编写处理popstate事件的函数时，重要的是要考虑到window.location之类的属性已经反映了状态更改(如果它影响了当前URL)，但是文档可能仍然没有.如果目标是赶上新文档状态已完全就绪的那一刻，则应使用零延迟setTimeout()方法调用来有效地放置其内部回调函数，该函数在浏览器事件循环结束时进行处理:window.onpopstate =()=>setTimeout(doSomeThing，0);

When writing functions that process popstate event it is important to take into account that properties like window.location will already reflect the state change (if it affected the current URL), but document might still not. If the goal is to catch the moment when the new document state is already fully in place, a zero-delay setTimeout() method call should be used to effectively put its inner callback function that does the processing at the end of the browser event loop: window.onpopstate = () => setTimeout(doSomeThing, 0);

内容取自 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event

在旁注中，建议不要使用它，因为浏览器可能会随时删除它.

这篇关于如果没有用户交互，Chrome Popstate不会在“后退按钮"上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！