瀏覽器tab頁面切換時觸發(fā)visibilitychange事件跷敬,離開頁面時visibilityState狀態(tài)值為hidden
visibilityState:
'visible' : 此時頁面內容至少是部分可見. 即此頁面在前景標簽頁中,并且窗口沒有最小化.
'hidden' : 此時頁面對用戶不可見. 即文檔處于背景標簽頁或者窗口處于最小化狀態(tài),或者操作系統(tǒng)正處于 '鎖屏狀態(tài)' .
'prerender' : 頁面此時正在渲染中, 因此是不可見的 (considered hidden for purposes of document.hidden). 文檔只能從此狀態(tài)開始羊壹,永遠不能從其他值變?yōu)榇藸顟B(tài).注意: 瀏覽器支持是可選的.
document.addEventListener("visibilitychange", function() {
//瀏覽器切換事件
if (document.visibilityState == "hidden") {
//狀態(tài)判斷
document.title = "別離開";
} else {
document.title = "你來啦";
}
});
瀏覽器刷新或者關閉頁面時,觸發(fā)onbeforeunload事件
當窗口即將被卸載(關閉)時,會觸發(fā)該事件.此時頁面文檔依然可見,且該事件的默認動作可以被取消.
window.onbeforeunload = function (e) {
e = e || window.event;
if (e) {
e.returnValue = '關閉提示';
}
return '關閉提示';
};
用法:
// 如果是vue組件的話有序,可以在mounted中添加監(jiān)聽事件
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
beforeunloadHandler(e) {
// 事件
// 如果要發(fā)送請求的話建議使用XMLHttpRequest或者Navigator.sendBeacon()
// 使用axios發(fā)送請求跛十,服務端會相應不到
},