監聽頁面離開事件


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

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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM