当浏览器没有立即触发popstate事件时如何处理后退按钮 [英] How to handle back button when browser is not firing popstate event immediately

问题描述

这个问题可能听起来很奇怪，因为大多数时候popstate会在用户按下后退按钮的同时被激活。

This question may sound weird, because most of the time popstate is fired synchronously as users press the back button.

然而，W3C规范说明了一个UA（浏览器）当遍历历史记录时，允许对popstate进行排队（请参阅项目14），即。 popstate 是异步触发的（即使URL此时已更改）。

However, W3C spec states that a UA (browser) is allowed to queue popstate when traversing history (see item 14), ie. popstate is fired asynchronously (even though URL has changed at this point).

浏览器供应商解释并实现此规范不同。 Mozilla决定 Firefox应该可以解雇 popstate 在加载之前，并且有充分的理由，以便慢速图像不会阻止 popstate 。

Browser vendors interpret and implement this spec differently. Mozilla decides Firefox should be able to fire popstate before load, and for good reasons, so that slow images will not block popstate.

Chrome / Safari另有决定，它引发了我们的问题：

Chrome/Safari decides otherwise, and it leads our problem:

管理网络应用程序的历史记录，通常需要尽快启动历史记录管理，例如。在 DOMContentLoaded 而不是加载。 但作为回报，用户无法退出任何 pushState ，因为所有 popstate 都排队等到加载。

When managing history for a web app, it's often desirable to kick off history management as soon as possible, eg. at DOMContentLoaded instead of load. But in return, users are not able to back out of any pushState, because all popstate are queued until load.

我们正在寻求处理此类方案的方法的建议。我自己想出了一些：

We are seeking advices for ways to handle such scenario. I come up with a few myself:

• Lazyload图片，所以加载可以解雇ASAP。


• 阻止用户界面，直到加载被解雇。


• <$ c上的初始化框架$ c>加载而不是 DOMContentLoaded 。

• Lazyload images, so load can fire ASAP.
• Block UI until load is fired.
• Init framework on load instead of DOMContentLoaded.

有没有更好的解决方案？

Are there better solutions?

更新：当ajx在加载，如果这些请求导致DOM更改，并且DOM更改恰好有一些图像， load 会被延迟，直到这些图像被加载/超时，这意味着 popstate 排队等候更长时间。

Update: Things get ugly when there are ajax that fire before load, if those request result in DOM change, and DOM change happens to have some images, load is delayed until those images are loaded/timeout, meaning popstate is queued for even longer.

更新2 ：要为其添加一个简单的演示，访问带有chrome的 jsbin页面并查看 popstate 将被阻止，直到 load 被触发。您可以比较缓存图像和未缓存图像之间的结果。

Update 2: To add a simple demo for it, visit this jsbin page with chrome and see popstate will be blocked until load is fired. You can compare result between cached image and uncached image.

推荐答案

您可以在卸载上一页时尝试调用popstate。例如，如果您在第1页并且想要转到第2页，而不是在第2页的加载/准备期间调用pop状态，为什么不在第1页的unload事件中调用pop状态？

Can you try calling popstate during unload of the previous page. For eg, if you're in page 1 and want to move to page 2, instead of calling pop state during the load/ready of page 2, why don't you call pop state in the unload event of the page 1?

不确定它是否满足您的情况。但是我无法在你的箱子里尝试它。

Not sure whether it satisfies your scenario. But I wasn't able to try it in your bin.

这篇关于当浏览器没有立即触发popstate事件时如何处理后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！