如何在使用移动版Safari浏览器时防止网页从缓存中重新加载？

Question

Mobile Safari使用特殊的缓存机制Page Cache(这里)，当我们导航到另一个页面时，它基本上会保持当前页面处于活动状态但休眠。这样，当用户按下返回按钮时，它可以立即显示先前页面的最新状态。 这对于导航和浏览网页很有用，但对于特殊情况来说却很烦人，因为每次用户导航到该页面时，您可能需要获取页面的新副本。(在我的情况下，我有两个页面：登录页面和主页面)。 我完全知道没有什么可以防止用户打开同一应用程序的多个选项卡。我不担心那个。 跨浏览器解决方案以防止页面被缓存对此无济于事，因为Safari会保持页面处于打开但不可见和暂停状态。

window.onpageshow和处理event.persisted并不能帮助解决问题，因为似乎浏览器第二次（当您按下back按钮时）不执行onpageshow事件的某些原因。

注意：对于那些不知道onpageshow事件是什么的人：苹果不鼓励使用load和unload事件，因为在页面缓存的概念下，这些事件没有明确的意义。因此，onpageshow应该做我们从load事件中期望的事情。

- Bakhshi

Answer 1

另一个潜在的解决方案是查看event.persisted标志以确定它是否已被缓存：

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

- Ted Naleid

Answer 2

当用户按下返回按钮时，您将收到与之前相同的文档（被挂起的旧页面）。因此，如果您处理onpagehide事件并在导航到新页面之前对页面进行一些修改，则您的更改会保留在那里。 我尝试在导航之前向body添加脚本块：

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
        });
    }

这段代码无法正常工作，因为脚本会立即执行，而我想要的是在用户返回页面时再执行它。 但是，如果你在离开pagehide回调之后延迟进行DOM修改（类似于这样）：

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();

            // wait for this callback to finish executing and then...
            setTimeout(function() {
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
            });
        });
    }

太好了！它起作用了！一旦用户在下一页上按下后退按钮，Safari会加载挂起的页面并执行此新的脚本块，这个脚本块之前没有被执行过。

- Bakhshi

---

为什么不直接使用 window.location.reload()，而要写成 $body.append("<script type='text/javascript'>window.location.reload();<\/script>")？ - Michael Cordingley

好的...如果你使用 window.location.reload 它不起作用。（之前没有起作用）如果我没记错，Safari 无法正确加载页面或者会丢失整个重新加载。我们需要在页面恢复挂起后运行脚本。 - Bakhshi