方法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) moz
18 (18)		 10 ms 12.10[*] Not supported

浏览器的visibilitychange 事件ie10以下不兼容的更多相关文章

  1. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  2. 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件

    [摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...

  3. 跨浏览器的javascript事件的封装

    一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...

  4. 页面可见性判断：document.hidden与visibilitychange事件

    我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document. ...

  5. 处理事件冒泡，阻止默认事件工具类，兼容IE

    //处理事件冒泡,阻止默认事件工具类,兼容IEvar eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element ...

  6. 如何阻止浏览器的默认事件，你是否也遇到过无法阻止Google默认事件的情况( 原生JS )

    如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要 ...

  7. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  8. 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

    转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...

  9. JavaScript 浏览器中的事件

    1.事件的基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...

随机推荐

  1. 网络IPC：套接字

    网络进程间通信(network IPC):不同计算机(通过网络相连)上运行的进程相互通信的机制. 套接字网络IPC接口:进程能够使用该接口和其他进程通信.通过该接口,其他进程运行位置是透明的,它们可以 ...

  2. bash中的数值运算

    第一种,使用((表达式)): a=3 ((b=a+2)) echo $b 第二种使用let: let "c=$a+4" echo $c 第三种,使用expr表达式(注意空格不能少) ...

  3. 基于MTD的NAND驱动开发、K9F1G08 2K page、Yaffs2 Files System

    转载:http://hi.baidu.com/cui1206/item/1d4119e376132513585dd886 基于MTD的NAND驱动(linux-2.6.22.10内核),目前已可以在该 ...

  4. 面试常备题---二叉树总结篇（zt)

    人生就像是一场长跑,有很多机会,但也得看我们是否能够及时抓牢,就像下面这样的代码: while(isRunning) { if(...){...} else if(...){...} ... else ...

  5. 小白日记4：kali渗透测试之被动信息收集（三）--Shodan、Google

    搜索引擎 公司新闻动态 重要雇员信息 机密⽂文档 / 网络拓扑 用户名密码 目标系统软硬件技术架构一.Shodan Shodan只搜网络设备.很多设备并不应该接入互联网,却由于本地网络管理员的疏忽和懒 ...

  6. 小团队开发管理工具：gitlab+redmine+testlink+jenkins

    由于工作需要,需要为团队搭建一个高效可用的开发管理平台.现在可用的开发管理工具很多开源的.商业的,网上也有很多博客和文章.经过2周的学习比较,再结合自己的项目特点,最后选定工具集:gitlab+red ...

  7. 关于Linux系统和Windows系统中文件夹的命名规范

    Windows系统中. 1.在创建文件夹的时候不能以"."开头(但是文件以多个点开头并且还有其他合法字符的话就是合法的) 但是在windows系统中确实见过以一个点".& ...

  8. Nginx环境下配置PHP使用的SSL认证(https)

    最近一段时间发现好多网站都从http协议变成了加密的https协议,比如说百度.吾志等等.https看起来比http高端了好多,而且在不同的浏览器向上还会显示出不同于http的URL展示效果(比如说c ...

  9. tomcat 安装

    升级系统之后很长一段时间没有用tomcat(主要是没做东西),这两天要开始干活了,发现竟然没法发用了....ok,重新整一遍.算是温习. 上次所有环境的搭建基本都是师兄帮我,自己做得东西很少,这次就正 ...

  10. 第八章 jQuery与Ajax应用

    Ajax(Asynchronous JavaScript and XML),异步JavaScript和XML,它实现的无刷新更新页面,能够进行异步提交. jQuery对Ajax进行了封装,最底层的是$ ...