4

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

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

Firefox
我了解 Firefox 和其他一些浏览器实现了pageshowand事件，并且在显示来自“bfcache”的页面时pagehide不会触发该事件。ready在此功能中，您可以查看event.originalEvent.persisted 情况。

IE/Chrome
我知道一个用来<input type="hidden" id="dirty">跟踪页面是否第一次在 IE/Chrome 中加载的技巧。不确定这有多可靠。我猜我也可以试试饼干。

为完全的无知道歉...

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

4

2 回答 2

1

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

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

享受编码。

于 2016-06-20T13:50:26.907 回答
0

页面下载完成后会初始化一个就绪函数，回溯历史是回到已经处于加载状态的页面。确保您的代码在一个函数中，以便您可以将其附加到一个事件处理程序，例如这个：

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

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

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

于 2013-10-30T16:40:33.170 回答