有一些需要統計登出時間,或者使用者離開的時間點等需求,這種需要監聽使用者離開網頁,關閉網頁的事件。
pc端有 unload,beforeunload等事件 進行監聽
這裡有一個部落格有詳細的記錄
js代碼:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiYWan5iM1ADO2EWZycDZxgDZmRzYyYzXxAjMxETM2AzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.gif)
<body onunload="goodbye()">
//window
window.onbeforeunload=function(e){
var e = window.event||e;
e.returnValue=("确定離開目前頁面嗎?");
}
View Code
但是移動端并沒有關閉浏覽器的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>