方法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. 解决Kscope中文乱码问题

    当安装Kscope完成后,然后配置以下三个路径:Cscope path:/usr/bin/cscopeCtags path:/usr/bin/ctagsDot path:/usr/bin/dot 对于 ...

  2. 关于删除linux多余内核

    step 1: 查找当前正在使用的内核文件的版本号 #uname -r step 2: 列出所有的内核文件,使用rpm 或者 dpkg(基于linux系统) 命令  #rpm -q kernel 或者 ...

  3. 炼数成金hadoop视频干货03

    视频地址:http://pan.baidu.com/s/1dDEgKwD 着重介绍了HDFS 运行了示例程序wordcount,自己也试了一遍(用的伪分布式) 1.建立数据(和讲师的操作有些不一样,不 ...

  4. css笔记01：CSS例子

    body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font ...

  5. 奥运会订票系统c语言代写源码下载

    制作能够实现2008北京奥运会网上订票的系统,能够实现购票人员注册.购票.管理人员可以设置各个比赛场地的赛事安排及票数. 程序要求实现的功能如下: 购票者信息注册:购票者可以用昵称和身份证进行注册,若 ...

  6. SQL_server 数据库备份信息查看

    select distinct s.database_name, s.first_lsn,s.last_lsn,s.database_backup_lsn,s.backup_finish_date,s ...

  7. Hibernate的几种主键生成策略

    主键类型: 业务主键(natural key):业务主键的值是来源于一个业务数据. 代理主键(surrogate key):代理主键需要采用一种方式来生成某个唯一值. 代理主键的生成策略: 1.hib ...

  8. [改善Java代码]覆写equals方法必须覆写hashCode方法

    覆写equals方法必须覆写hashCode方法,这条规则基本上每个Javaer都知道,这也是JDK API上反复说明的,不过为什么要这样做呢?这两个方法之间有什么关系呢?本建议就来解释该问题,我们先 ...

  9. Hashtable 和 HashMap 的比较

        Hashtable HashMap 并发操作 使用同步机制, 实际应用程序中,仅仅是Hashtable本身的同步并不能保证程序在并发操作下的正确性,需要高层次的并发保护. 下面的代码试图在ke ...

  10. hdu 4005 边连通度与缩点

    思路:先将图进行缩点,建成一颗树,那么如果这是一条单路径树(即最大点度不超过2),就不在能删的一条边,使得不连通.因为将其头尾相连,形成一个圈,那么删任意一条边,图都是连通的. 上面的是无解的情况,如 ...