天天看點

監聽頁面離開事件

有一些需要統計登出時間,或者使用者離開的時間點等需求,這種需要監聽使用者離開網頁,關閉網頁的事件。

pc端有 unload,beforeunload等事件 進行監聽

​​這裡有一個部落格有詳細的記錄​​

js代碼:

監聽頁面離開事件
監聽頁面離開事件
<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>