IOS中,网页的前进后退操作(包括history.go()
、history.back()
等)是直接进入其离开时的快照,不会重新触发页面的load
事件。此时js从上次离开时的状态继续往下执行。
解决方案
1.使用document.referrer
代替history.back()
进行返回
location.href = document.referrer;
document.referrer
是一个字符串,内容为上一页面的URL
- 以下情况
document.referrer
会为空字符串""
- 跨域
- http与https之间跳转
-
使用location.reload()
、location.href
、location.replace()
更新页面 - 从浏览器、书签等打开一个新页面
- a标签设置
rel="noreferrer"
- iframe
浏览器支持情况
- 缺点
- 存在以上限制
- 本质上是一次跳转而非返回,如 a-b-c-d ,d页面通过
window.location.href=document.referrer
返回到c页面,对于c页面来说b不是他的上一级页面了、上一级页面变成了d;
2. 使用pageshow、pagehide事件
不同浏览器对load/unload/pageshow/pagehide表现不同,使用前需多加测试
- onpageshow 事件在用户浏览网页时触发(onload之后)。
类似于 onload 事件,但onload只在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件当页面从浏览器缓存中读取时不触发(如通过前进/后退进入页面时)。 - onpagehide 事件在用户离开网页时触发(onunload之前)。
第一次进入时,触发pageshow
,此时isPageHide
为false
。离开页面时触发pagehide
,isPageHide
变为true
。第二次进入时再次触发pageshow
,此时isPageHide
为true
,成功触发页面刷新。
$(function () {
var isPageHide = false;
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
})
visibilitychange
pageshow
/pagehide
会在页面跳转前后触发,而visibilitychange
会在页面被隐藏或显示时(如浏览器tab切换、窗口被最小化等)触发,配合Document.hidden
可以实现如"页面被切到后台时停止声音播放,切到前台时恢复播放"等功能。
// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
// 如果页面是隐藏状态,则暂停视频
// 如果页面是展示状态,则播放视频
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// 处理页面可见属性的改变
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// 当视频暂停,设置title
// This shows the paused
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// 当视频播放,设置title
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}
网友评论