zoukankan      html  css  js  c++  java
  • 监听页面离开事件

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

    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>
    

      

  • 相关阅读:
    区间覆盖(线段树)
    差分约束
    二维数组
    P1195 口袋的天空
    dp的刷表法和填表法
    P1284 三角形牧场
    数据库课程设计
    具体解释VB中连接access数据库的几种方法
    android之PackageManager简单介绍
    Oracle fga审计有这几个特性
  • 原文地址:https://www.cnblogs.com/GoTing/p/13346598.html
Copyright © 2011-2022 走看看