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

ej83mcc0 于 2023-01-30 发布在 jQuery

关注(0)|答案(7)|浏览(191)

我有以下处理程序：

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

当我导航离开页面（通过按下链接）并返回页面（通过按下 “back” 按钮）时，没有调用 alert（）（iPad 2、iOS 5.1）。
请问我做错了什么？还有什么需要绑定的事件吗？
PS：有趣的是，当导航离开页面时，pagehide 被正确接收。

jquery

来源：https://stackoverflow.com/questions/10106457/pageshow-is-not-received-when-pressing-back-button-on-safari-on-ipad

7条答案

按热度按时间

0vvn1miw1#

您可以检查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");
    }
};

赞(0）回复(0）举报 2023-01-30

omqzjyyz2#

这可能是缓存问题。当你通过“后退”按钮返回页面时，页面会该高速缓存中被拉出来（行为取决于浏览器）。因此，你的JS不会触发，因为页面已经在缓存中呈现，重新运行你的js可能会对布局等有害。
您应该能够通过调整响应中的缓存头或使用一些浏览器技巧来克服这个问题。
以下是有关此问题的一些链接：

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

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

赞(0）回复(0）举报 2023-01-30

nsc4cvqm3#

这里我们要做的是将alert("back to page")的返回值绑定为回调函数，这是行不通的，我们需要绑定一个函数：

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

赞(0）回复(0）举报 2023-01-30

4xy9mtcn4#

我添加了同样的问题，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); 
});

赞(0）回复(0）举报 2023-01-30

yr9zkbsy5#

我就这样解决了这个问题

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

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

});

function back() {
   //YOUR CODES
}

赞(0）回复(0）举报 2023-01-30

gwo2fgha6#

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

赞(0）回复(0）举报 2023-01-30

sqyvllje7#

我让它在所有网络浏览器上工作的唯一方法是不允许缓存你返回的页面。使用JavaScript让它工作会很好，但我可以弄清楚。
我在我的.asp页面a helpful list of most options available to add the header.中添加了一个Cache-Control标题。
我的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")

请求，我建议您添加a tracking mechanism来跟踪点击。

赞(0）回复(0）举报 2023-01-30

我来回答

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

7条答案

相关问题

热门标签

最新问答