Mobile Safari后退按钮 [英] Mobile Safari back button

问题描述

我发现的问题非常类似于这个问题，除了台式机上的Safari似乎已经解决了这个问题。基本上，问题是：当客户端浏览移动版Safari并且页面在pagea.html上执行javascript函数时，然后导航到pageb.html，然后按后退按钮返回pagea.html，javascript函数当客户端按下后退按钮返回pagea.html时，将不会运行。它将跳过javascript调用。

The issue I've found is very similar to this question, except that Safari on desktops seems to have resolved the issue. Essentially, the issue is this: when a client is browsing on mobile safari and the page executes a javascript function on pagea.html, then navigate to pageb.html, then press the back button to go back to pagea.html, the javascript function won't run when the client pressed the back button to come back to pagea.html. It will skip the javascript call.

我已尝试过上面链接中提到的解决方案，但似乎没有什么适用于移动版Safari。还有其他人遇到过这个bug吗？你是怎么处理它的？

I've tried the solutions mentioned in the link above, but nothing seems to work for mobile Safari. Has anyone else encountered this bug? How did you handle it?

推荐答案

这是由后向缓存。当用户导航时，它应该保存完整的页面状态。当用户使用后退按钮页面导航时，可以非常快速地从缓存加载。这与只缓存HTML代码的普通缓存不同。

This is caused by back-forward cache. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.

当为bfcache加载页面 onload 事件不会是触发。相反，您可以检查 onpageshow 事件的持久属性。初始页面加载时设置为false。当页面从bfcache加载时，它被设置为true。

When page is loaded for bfcache onload event wont be triggered. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.

window.onpageshow = function(event) {
    if (event.persisted) {
        alert("From back / forward cache.");
    }
};

由于某些原因，jQuery在事件中没有此属性。你可以从原始事件中找到它。

For some reason jQuery does not have this property in the event. You can find it from original event though.

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
      alert("From back / forward cache.");
    }
});

这些问题的快速解决方案是在按下后退按钮时重新加载页面。然而，这会使后退/前进缓存产生的任何正面影响无效。

Quick solution to these problem is to reload the page when back button is pressed. This however nullifies any positive effect back / forward cache would give.

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

作为旁注，你可以看到很多页面提供空 onunload 处理程序作为解决方案。自从iOS5以来这没有用。

As a sidenote, you can see lot of pages offering using empty onunload handler as solution. This has not worked since iOS5.

$(window).bind("unload", function() { });

这篇关于Mobile Safari后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！