[英]'pageshow' is not received when pressing "back" button on Safari on *IPad"
我有以下處理程序：
$(window).bind('pageshow', function() { alert("back to page"); });
當我離開頁面（通過按鏈接）並返回頁面（通過按“后退”按鈕）時，不會調用alert() (iPad 2、iOS 5.1)。
請問我做錯了什么？ 我需要綁定其他任何事件嗎？
PS：有趣的是，離開頁面時可以正確接收到pagehide 。
您可以檢查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");
}
};
這很可能是緩存問題。 當您通過“后退”按鈕返回頁面時，頁面正在從緩存中拉出（行為取決於瀏覽器）。 因此，您的 JS 將不會觸發，因為頁面已經在緩存中呈現，並且重新運行您的 js 可能對布局等有害。
您應該能夠通過調整響應中的緩存標頭或使用一些瀏覽器技巧來克服這個問題。
以下是有關該問題的一些鏈接：
編輯
這些都是從上面的鏈接中提取的：
history.navigationMode = 'compatible';<body onunload=""><!-- This does the trick -->pageshow和pagehide特殊事件。”$(document).ready(handler)window.onunload = function(){};您在那里做的是將alert("back to page")的返回值綁定為回調。 那行不通。 你需要綁定一個函數：
$(window).bind('pageshow', function() { alert("back to page"); });
我添加了同樣的問題，其中 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);
});
我就這樣解決了這個問題；
$(window).bind("pageshow", function () {
setTimeout(function () {
back();
}, 1000);
});
function back() {
//YOUR CODES
}
你應該檢查你的頁面是否有 iFrame 組件？ 我不知道為什么，但我刪除了 iFrame 組件來解決這個問題
我讓它在所有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")
請求，我建議你添加一個跟蹤機制來跟蹤點擊。
如何在MAC野生動物園中按返回按鈕時強制頁面刷新
[英]How to force a page refresh while pressing the back button in MAC safari
當按下后退按鈕時，Ajax“ POST”在URL中顯示表單條目
[英]Ajax “POST” is showing form entries in URL when pressing back button
按下后退按鈕時如何使用preventBack（）刷新頁面？
[英]How to use preventBack() to refresh a page when pressing back button?
未捕獲的TypeError：按下后退按鈕時對象不是函數
[英]Uncaught TypeError: object is not a function when pressing back button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.