在 *iPad 上的 Safari 上按“返回”按钮时未收到“pageshow”答案

【问题标题】：'pageshow' is not received when pressing "back" button on Safari on *IPad"在 *iPad 上的 Safari 上按“返回”按钮时未收到“pageshow”
【发布时间】：2012-04-23 18:55:39
【问题描述】：

我有以下处理程序：

        $(window).bind('pageshow', function() { alert("back to page"); });

当我离开页面（通过点击链接）并返回页面（通过按“返回”按钮）时，alert() 未调用（iPad 2、iOS 5.1）。

请问我做错了什么？我需要绑定其他任何事件吗？

PS：有趣的是 pagehide 在离开页面时被正确接收。

【问题讨论】：

标签： javascript jquery safari mobile-safari

【解决方案1】：

您可以检查pageshow 事件的persisted 属性。它在初始页面加载时设置为 false。当页面从缓存中加载时，它被设置为 true。

window.onpageshow = function(event) {
    if (event.persisted) {
        alert("back to page");
    }
};

由于某种原因，jQuery 在事件中没有这个属性。不过，您可以从原始活动中找到它。

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
      alert("back to page");
    }
};

【讨论】：

看来这应该是正确的答案，但我尝试过的浏览器（Mac OS 10.9 上的 Safari 7 和 Firefox 26）从未设置为真，即使它们实际上并没有重新加载从服务器。（此时我什至不愿意信任他们自己的开发人员工具，所以我使用 Wireshark 进行验证。我正在发送缓存控制标头以使页面不可缓存，而 Safari 声称它没有使用缓存，但是当我单击“返回”时，Wireshark 没有显示到服务器的流量。）
那么在 Safari 7 中发生了一些变化。刚刚经过测试，在 Safari 6 中 event.persisted 设置为 true。
看起来 onpageshow 事件在 6.1.1 中根本不会触发。单击后退按钮时...
@giskard22 你是怎么解决的。我遇到了同样的问题。
只是留言告诉你这个问题在 iOS 9.3 的 Safari 上仍然存在，还没有找到有效的答案。

【解决方案2】：

这可能是缓存问题。当您通过“返回”按钮返回页面时，页面将从缓存中拉出（行为取决于浏览器）。因此，您的 JS 不会触发，因为该页面已经在缓存中呈现，并且重新运行您的 js 可能会损害布局等。

您应该能够通过调整响应中的缓存标头或使用一些浏览器技巧来克服这个问题。

这里有一些关于这个问题的链接：

编辑

这些都是从上面的链接中拉出来的：

history.navigationMode = 'compatible';
<body onunload="">
“Firefox 1.5+ 和一些下一个版本的 Safari（其中包含对错误 28758 的修复）支持称为 pageshow 和 pagehide 的特殊事件。”
使用jQuery的$(document).ready(handler)
window.onunload = function(){};

【讨论】：

谢谢。我怀疑它是由于缓存问题而发生的。另外，如果我是对的 - pageload 和 pagehide 只是应该完成这项工作的“技巧”（但它们似乎不起作用），可以你请更具体地说明我不知道的其他技巧？啊，在我的情况下，我无法修改缓存标头。

【解决方案3】：

您正在做的是将alert("back to page") 的返回值绑定为回调。那是行不通的。您需要绑定一个函数：

$(window).bind('pageshow', function() { alert("back to page"); });

【讨论】：

抱歉，感谢您的更正 - 也尝试过但没有成功（实际上，我自制的示例包含回调函数，而不是实际调用）。主要问题已编辑。
最后，一些适用于 iPhone Safari 后退按钮的东西。谢谢。
这是一个有价值的见解。谢谢。

【解决方案4】：

我添加了相同的问题，即 iOS 在返回时并不总是发布“pageshow”事件。

如果没有，safari 会继续在页面上执行 JS，所以我认为计时器会继续触发。

所以我提出了这个解决方案：

var timer;

function onPageBack() { alert("back to page"); }

window.addEventListener('pageshow', function() {
    if (event.persisted)
        onPageBack();

    // avoid calling onPageBack twice if 'pageshow' event has been fired...
    if (timer)
        clearInterval(timer);
});

// when page is hidden, start timer that will fire when going back to the page...
window.addEventListener('pagehide', function() {
    timer = setInterval(function() {
        clearInterval(timer);
        onPageBack(); 
    }, 100); 
});

【讨论】：

【解决方案5】：

我就这样解决了这个问题；

$(window).bind("pageshow", function () {

    setTimeout(function () {
        back();
    }, 1000);

});

function back() {
   //YOUR CODES
}

【讨论】：

【解决方案6】：

你应该检查你的页面是否有 iFrame 组件？我不知道为什么，但我删除了 iFrame 组件来解决这个问题

【讨论】：