IOS中已艰,網(wǎng)頁的前進(jìn)后退操作(包括history.go()
、history.back()
等)是直接進(jìn)入其離開時(shí)的快照蚕苇,不會(huì)重新觸發(fā)頁面的load
事件哩掺。此時(shí)js從上次離開時(shí)的狀態(tài)繼續(xù)往下執(zhí)行。
1. 使用document.referrer
代替history.back()
進(jìn)行返回
location.href = document.referrer;
document.referrer
是一個(gè)字符串涩笤,內(nèi)容為上一頁面的URL(通過_blank形式打開的新窗口也可以獲得之前頁面的URL)
- 以下情況
document.referrer
會(huì)為空字符串""
- 通過在瀏覽器中輸入地址嚼吞、使用書簽盒件、掃碼等方式進(jìn)入頁面
- 受到 referrer-policy 配置影響
缺點(diǎn)
- 存在以上限制
- 不同瀏覽器可能有兼容差異
- 本質(zhì)上是一次跳轉(zhuǎn)而非返回,如 a-b-c-d 舱禽,d頁面通過
window.location.href=document.referrer
返回到c頁面炒刁,對(duì)于c頁面來說b不是他的上一級(jí)頁面了、上一級(jí)頁面變成了d;
2. 使用pageshow呢蔫、pagehide事件
不同瀏覽器對(duì)load/unload/pageshow/pagehide表現(xiàn)不同切心,使用前需多加測(cè)試
- onpageshow 事件在用戶瀏覽網(wǎng)頁時(shí)觸發(fā)(onload之后)。
類似于 onload 事件片吊,但onload只在頁面第一次加載時(shí)觸發(fā), onpageshow 事件在每次加載頁面時(shí)觸發(fā)协屡,即 onload 事件當(dāng)頁面從瀏覽器緩存中讀取時(shí)不觸發(fā)(如通過前進(jìn)/后退進(jìn)入頁面時(shí))俏脊。 - onpagehide 事件在用戶離開網(wǎng)頁時(shí)觸發(fā)(onunload之前)。
第一次進(jìn)入時(shí)肤晓,觸發(fā)pageshow
爷贫,此時(shí)isPageHide
為false
。離開頁面時(shí)觸發(fā)pagehide
补憾,isPageHide
變?yōu)?code>true漫萄。第二次進(jìn)入時(shí)再次觸發(fā)pageshow
,此時(shí)isPageHide
為true
盈匾,成功觸發(fā)頁面刷新意系。
$(function () {
var isPageHide = false;
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
})
referer 引薦來源
referer 參數(shù)是http請(qǐng)求頭header的參數(shù)牙躺,表示請(qǐng)求的來源地址。
該地址的路由或query信息中可能包含一些敏感信息(如token或者用戶id),為了防止信息泄漏可用 referrer-policy 控制
注意缝裁,僅請(qǐng)求頭中因W3C的疏忽拼寫錯(cuò)誤,為referer
筋栋,但其他場(chǎng)合下(如document.referrer
和referrer-policy
)為正確拼寫咒彤。
referrer-policy 引薦來源策略
referrer-policy 用于控制 referer ,可按情況提交為完整地址劈伴、僅Origin(協(xié)議+域名+端口)密末、隱藏地址,但無法篡改 referrer 為虛假地址跛璧。
配置方法
- 全局設(shè)置
通過meta標(biāo)簽严里,設(shè)置整個(gè)網(wǎng)頁中所有鏈接的默認(rèn)策略
<meta name="referrer" content="origin">
- 單獨(dú)設(shè)置
<a>、<area>赡模、<img>田炭、<iframe>、<link>漓柑,可在標(biāo)簽里單獨(dú)設(shè)置該請(qǐng)求的referrerpolicy
屬性
<a referrerpolicy="origin" target="_blank">鏈接</a>
可選擇的屬性目前有9種:
- no-referrer
總是不發(fā)送referrer信息 - no-referrer-when-downgrade
協(xié)議降級(jí)(https調(diào)用http)時(shí)不發(fā)送referrer信息 - same-origin
僅同源(協(xié)議教硫、域名叨吮、端口都相同)時(shí)發(fā)送 - origin
總是發(fā)送origin(即協(xié)議+域名+端口) - strict-origin
協(xié)議降級(jí)(https調(diào)用http)時(shí)不發(fā)送referrer信息
其他場(chǎng)合同origin - origin-when-cross-origin
跨域時(shí)僅發(fā)送origin(即協(xié)議+域名+端口)
同源時(shí)發(fā)送完整信息 - strict-origin-when-cross-origin
既跨域又協(xié)議降級(jí)(https調(diào)用http)時(shí),僅發(fā)送origin(即協(xié)議+域名+端口)
其他場(chǎng)合發(fā)送完整的referrer - unsafe-url
總是發(fā)送完整的referrer - 空字符串
采用其他位置定義的引用者策略瞬矩,或者在沒有此類更高級(jí)別策略的情況下茶鉴,默認(rèn)為“ no-referrer-when-downgrade”(不同瀏覽器版本可能不同,新版Chrome為 strict-origin-when-cross-origin)
visibilitychange
pageshow
/pagehide
會(huì)在頁面跳轉(zhuǎn)前后觸發(fā)景用,而visibilitychange
會(huì)在頁面被隱藏或顯示時(shí)(如瀏覽器tab切換涵叮、窗口被最小化等)觸發(fā),配合Document.hidden
可以實(shí)現(xiàn)如"頁面被切到后臺(tái)時(shí)停止聲音播放伞插,切到前臺(tái)時(shí)恢復(fù)播放"等功能割粮。
// 設(shè)置隱藏屬性和改變可見屬性的事件的名稱
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");
// 如果頁面是隱藏狀態(tài),則暫停視頻
// 如果頁面是展示狀態(tài)媚污,則播放視頻
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);
// 當(dāng)視頻暫停舀瓢,設(shè)置title
// This shows the paused
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// 當(dāng)視頻播放,設(shè)置title
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}