浏览器的visibilitychange 事件ie10以下不兼容

方法1,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://mat1.gtimg.com/www/js/jquery/jquery-1.11.1.min.js"></script>
    <script>
/***
   切换浏览器tab,判断当前tab是否活跃
***/
    (function(g, h, $, b) {
        var e, i, f = 'onfocusin' in h && 'hasFocus' in h ? 'focusin focusout' : 'focus blur',
            d = ['', 'moz', 'ms', 'o', 'webkit'],
            c = $.support,
            a = $.event;
        while ((i = e = d.pop()) != b) {
            i = (e ? e + 'H' : 'h') + 'idden';
            if (c.pageVisibility = typeof h[i] == 'boolean') {
                f = e + 'visibilitychange';
                break
            }
        }
        $(/blur$/.test(f) ? g : h).bind(f,
            function(m) {
                var l = m.type,
                    j = m.originalEvent,
                    k = j.toElement;
                if (!/^focus./.test(l) || (k == b && j.fromElement == b && j.relatedTarget == b)) {
                    a.trigger((i && h[i] || /^(?:blur|focusout)$/.test(l) ? 'hide' : 'show') + '.visibility')
                }
            })
    }(this, document, jQuery));

    var o={}
    o.$tabFlag = true;
     /**  切换页卡 **/  
    var changeTab=function() {
        console.log(333)
        $(document).bind({
            'show.visibility': function() { // 当前活跃
                o.$tabFlag = true;
                console.log(222)
            },
            'hide.visibility': function() { // 失去当前状态
                o.$tabFlag = false;
                console.log(11111)
            }
        });
    }
    
    changeTab();
    </script>
</head>
<body>    
</body>
</html>

 方法2

                var o={};
                // 找到当前浏览器支持的hidden属性名和visibilitychange事件名
                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";
                }
                $(document).bind(visibilityChange,function(){
                    if (document[hidden]) {
                        console.log(1111)
                        o.$tabFlag = false;
                        // videoElement.pause();
                    } else {
                        console.log(222)
                        o.$tabFlag = true;
                        // videoElement.play();
                    }
                })

Feature

Chrome (Webkit)

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

13 webkit

10 (10) moz18 (18)

10 ms

12.10[*]

Not supported

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android PakageManagerService启动流程分析

PakageManagerService的启动流程图 ? 1.PakageManagerService概述 PakageManagerService是andro...

50810
来自专栏一个会写诗的程序员的博客

【Mac IDEA Java Web项目Tomcat启动报错】java.net.MalformedURLException: Local host name unknown

java.net.MalformedURLException: Local host name unknown

1213
来自专栏蜉蝣禅修之道

iOS开发之CFHttpMessageRef的那些坑

3396
来自专栏乐沙弥的世界

使用 SQLNET.EXPIRE_TIME 清除僵死连接

    数据库连接的客户端异常断开后,其占有的相应并没有被释放,如从v$session视图中依旧可以看到对应的session处于inactive,且对应的服务器...

2492
来自专栏流柯技术学院

Monkey测试3——Monkey测试结果分析

Monkey测试结果分析 一. 初步分析方法: Monkey测试出现错误后,一般的差错步骤为以下几步: 1、 找到是monkey里面的哪个地方出错 2、...

3301
来自专栏码匠的流水账

解决jd-gui在Sierra下闪退问题

在升级了mac操作系统到Sierra版本之后,之前的jd-gui就闪退了,本文就讲述一下如何解决这个问题。

2541
来自专栏along的开发之旅

创建Ripple山寨币

replace “masterpassphrase” with what you like.

1211
来自专栏james大数据架构

Android之assets资源

assets目录下存放的原生资源文件,通过getAssets()方法获取. 使用: InputStream inputStream; t...

1888
来自专栏GIS讲堂

Highcharts导出图片

Highcharts是在做项目涉及到统计图的时候大家的首选,同时也会用到highcharts的export功能,将统计图导出为图片,刚好,最近也遇到了这样的事情...

5362
来自专栏Seebug漏洞平台

花式窃取NetNTLM哈希的方法

原文:https://osandamalith.com/2017/03/24/places-of-interest-in-stealing-netntlm-ha...

3208

扫码关注云+社区

领取腾讯云代金券