Question

我是jquery的新手，只是意识到当使用浏览器的BACK按钮返回页面时，.ready函数中的代码并不总是运行。通过阅读stackoverflow上两年前的帖子，似乎并非所有浏览器都以相同的方式工作，并且没有单一的jquery函数来解决问题。 情况仍然如此？用于检测页面是第一次运行还是在用户按下BACK后再次显示的最佳方法（2012年！）是什么？

为了清楚起见：假设我有一个红色文本页面，其中点击通过javascript / jquery将单词更改为蓝色......如果我导航到新的URL，然后按下BACK，将发生以下情况：<登记/> Firefox - 单词仍然是蓝色的 IE / Chrome - 单词重新变为红色

火狐
我了解Firefox和其他一些浏览器实现pageshow和pagehide事件，并且在显示“bfcache”中的页面时不会触发ready事件。在此功能中，您可以查看event.originalEvent.persisted to see what the situation is。

IE /铬
I am aware of one trick使用<input type="hidden" id="dirty">来跟踪网页是否首次在IE / Chrome中加载。不确定这是多么可靠。我猜也可以尝试一下。

道歉完全无知......

编辑：为什么？
我自己的情况需要很长时间才能解释，但这是一个有着同样问题的愚蠢示例：图像显示10张扑克牌的页面，用户可以选择一张卡片使其在屏幕上向上移动。当您选择卡时，会发出ajax请求以将卡的详细信息发送到服务器。现在假设您离开页面，然后使用BACK返回它。有三件事可能发生：
1.浏览器可以调用服务器获取页面，服务器（数据库）知道选择了哪个卡，因此可以输出相关的HTML /脚本
2. Firefox将使用bfcache显示您的页面 - 所选卡仍将被选中（向上移动），因为DOM的状态已被完全保留（ready事件将不会被点击）
3. IE / Chrome将从缓存中重新加载原始HTML并调用ready事件的脚本.....显示所有处于“未选定”位置的扑克牌。您选择的卡片丢失了！

Answer 1

您可以使用此代码段检查页面是否来自bfcache（后向缓存）

window.addEventListener('pageshow', function(event) {
    console.log(event);
    if (event.persisted) {
        // comes from cache
    }
});

享受编码。

Answer 2

页面下载完成后初始化就绪功能，历史记录中的回溯将返回到已处于加载状态的页面。确保您的代码在函数中，以便将它附加到事件处理程序，例如：

//A function to execute
function updateCardDeck() {
 ...
};

//The event call bind
window.addEventListener('pageshow', updateCardDeck, false);

这可能是您在历史浏览操作后要使用的事件，您应该将其放在HTML标记的底部，而不是在window.ready事件中。

如何在所有浏览器中处理就绪和页面显示事件，以便在按下后退按钮时提供帮助

2 个答案: