监听页面离开事件

有一些需要统计登出时间,或者用户离开的时间点等需求,这种需要监听用户离开网页,关闭网页的事件。

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>

  

posted @ 2020-07-20 18:31  明媚下雨天  阅读(1304)  评论(0编辑  收藏  举报