在 *iPad 上按 Safari 上的“后退”按钮时未收到“pageshow””

Question

我有以下处理程序：

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

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

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

PS：有趣的是，离开页面时可以正确接收到pagehide 。

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

Answer 2

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

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

以下是有关该问题的一些链接：

• 单击后退按钮时是否有跨浏览器的 onload 事件？
• 回到 Firefox 历史后，JavaScript 将无法运行

编辑

这些都是从上面的链接中提取的：

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

Answer 3

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

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

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

Answer 5

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

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

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

});

function back() {
   //YOUR CODES
}

Answer 6

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

Answer 7

我让它在所有web 浏览器上工作的唯一方法是禁止缓存您要返回的页面。 我知道——这有点激进； 使用 JavaScript 让它工作会很好，但我可以弄清楚。

我在我的.asp页面中添加了一个Cache-Control header一个有用的列表，其中列出了可用于添加 header 的大多数选项。

我的test.asp页面

<%@language="VBSCRIPT" CODEPAGE="65001" LCID=1033%>
<%
Option Explicit
SetLocale(1033)
Response.ContentType = "text/html"
Response.CharSet = "UTF-8"

Response.addHeader "Cache-Control", "no-cache, no-store, must-revalidate" ' HTTP 1.1.
Response.addHeader "Pragma", "no-cache" ' HTTP 1.0.
Response.addHeader "Expires", "0" ' Proxies.
    
%><html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
body {margin: 50px auto;text-align: center;}
a {padding: 5px;}
#spinner {width: 100%;height: 100%;background: green;position: absolute;top: 0;display:none;}
</style>
<head>
</head>
<body style="min-height: 100vh;">
Hello World!<br>
<h3 id="pagevalue"></h3>
<a href="test.asp?page=1" onclick="showSpinner();">page 1</a>
<a href="test.asp?page=2" onclick="showSpinner();">page 2</a>
<a href="test.asp?page=3" onclick="showSpinner();">page 3</a>
<div id="spinner"></div>
<script>
function showSpinner(){
    document.getElementById("spinner").style.display = "block";
}
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};
document.getElementById("pagevalue").innerHTML = "page "+getUrlParameter("page");
</script>
</body>
</html>

完成你的

alert("back to page")

请求，我建议你添加一个跟踪机制来跟踪点击。