Question

Mobile Safari使用一种特殊的缓存机制Page Cache（here），当我们导航到另一个页面时，它基本上保持当前页面处于活动状态但处于休眠状态。这样，当用户按下back按钮时，它可以立即显示上一页的最新状态。

这对于导航和浏览网页非常有用，但对于特殊情况，这会变得很烦人，因为每次用户导航到该页面时，您可能需要获取页面的新副本。（在我的情况下，我需要页面：登录和主页）。

我完全清楚没有什么能阻止用户打开同一个应用程序的多个标签。我并不担心。

cross browser solution for preventing page from being cached没有帮助，因为Safari会保持页面打开但不可见并暂停。

window.onpageshow和处理event.persisted没有帮助，因为浏览器第二次出现某些原因（按onpageshow按钮时似乎没有执行back事件）。

对于那些不知道onpageshow事件的人来说，

注意：Apple不鼓励使用load和unload事件，因为的概念页面缓存这些事件没有明确的意义。因此，onpageshow应该执行我们对load事件的期望。

Answer 1

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

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

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>");
            });
        });
    }

TADA 它有效！一旦用户按下下一页上的按钮，Safari就会加载暂停的页面并执行之前未执行的新脚本块。

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

2 个答案: