zoukankan      html  css  js  c++  java
  • 判断当前页面是不是用户正在浏览的页面

    通过visibilitychange事件来判断页面可见性的状态,通过document.hidden来判断当前页面是否在浏览

    // 各种浏览器兼容
    var hidden, visibilityChange; 
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    
    // 添加监听器,在title里显示状态变化
    document.addEventListener(visibilityChange, function() {
        if(document[hidden]){
            // 用户没有浏览当前页面
        }else{
            // 用户正在浏览当前页面
        }
    }, false);
    

      或者

    var hiddenProperty = 'hidden' in document ? 'hidden' :    
        'webkitHidden' in document ? 'webkitHidden' :    
        'mozHidden' in document ? 'mozHidden' :    
        null;
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var onVisibilityChange = function(){
        if (!document[hiddenProperty]) {    
            console.log('页面非激活');
        }else{
            console.log('页面激活')
        }
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
    

      

  • 相关阅读:
    JavaScript(五)对象
    JavaScript(四)字符串类型
    JavaScript(三)数值类型
    JavaScript(二)数据类型
    JavaScript(一)基本语法
    ES6总结
    HBuilderX真机调试检测不到魅族手机
    安装Ubuntu 20.04 LTS服务器系统
    Windows进程通信(IPC)之共享内存
    C++代理模式的实现
  • 原文地址:https://www.cnblogs.com/yourName/p/10531198.html
Copyright © 2011-2022 走看看