监听页面离开事件-CFANZ编程社区

监听页面离开事件

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

pc端有 unload，beforeunload等事件进行监听

这里有一个博客有详细的记录

js代码：

监听页面离开事件_qq浏览器

监听页面离开事件_js_02

<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>

0 条评论