有一些需要統計登出時間,或者用戶離開的時間點等需求,這種需要監聽用戶離開網頁,關閉網頁的事件。
pc端有 unload,beforeunload等事件 進行監聽
js代碼:
<body onunload="goodbye()"> //window window.onbeforeunload=function(e){ var e = window.event||e; e.returnValue=("確定離開當前頁面嗎?"); }
但是移動端並沒有關閉瀏覽器的x或者按鈕,移動端關閉瀏覽器,相當於殺死進程,來關閉,(安全因素)我們是無法監聽客戶端殺死進程的操作的。
以下這種方法,通用於pc+移動端,能較好地兼容;
通過監聽visibilityState的值來判斷,用戶是否離開了頁面 詳細介紹
測試機型:
window 谷歌 火狐
ios 微信瀏覽器,自帶瀏覽器,qq瀏覽器
小米手機 小米瀏覽器,微信瀏覽器,qq瀏覽器
均可使用。
<script>
var p=document.createElement('p');
p.innerHTML='出去了'
var p1=document.createElement('p');
p1.innerHTML='回來了'
var body=document.getElementsByTagName('body')[0]
document.addEventListener('visibilitychange', function () {
// 用戶離開了當前頁面
if (document.visibilityState === 'hidden') {
body.appendChild(p)
}
// 用戶打開或回到頁面
if (document.visibilityState === 'visible') {
body.appendChild(p1)
}
});
</script>
