方法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. NonEmpty和Non Empty的区别[转]

    One of my favourite questions in MDX is the difference between Non Empty and NonEmpty because even t ...

  2. HelloSpark.scala

    /** * Created by root on 9/6/15. */ import org.apache.spark.SparkContext import org.apache.spark.Spa ...

  3. Android（java）学习笔记69：JDK5之后的Lock锁的概述和使用

    1. Lock锁的概述: java.util.concurrent.locks,接口Lock 首先Lock是一个接口,Lock实现提供了比使用synchronized方法 和 同步代码块更为广泛的锁定 ...

  4. ArcGIS动态文本

    处理动态文本 来自:http://resources.arcgis.com/zh-cn/help/main/10.2/index.html#/na/00s900000013000000/ Deskto ...

  5. 《MFC游戏开发》笔记二 建立工程、调整窗口

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9300383 作者:七十一雾央 新浪微博:http:/ ...

  6. KindEditor编辑器, 利用ajax动态切换编辑器内容

    // 后台成功返回数据后的js处理 KindEditor.remove('#content_id'); // 先移除之前创建的编辑器 var editor = KindEditor.create('# ...

  7. [改善Java代码]自由选择字符串拼接方法

    对一个字符串拼接有三种方法:加号,contact方法,StringBuffer或者StringBuilder的append方法,其中加号是最常用的.其他两种方式偶尔会出现在一些开源项目中,那么这三者有 ...

  8. MyBatis(3.2.3) - Dynamic SQL

    Sometimes, static SQL queries may not be sufficient for application requirements. We may have to bui ...

  9. C# 私人笔记

    .ADO.NET 连接数据库的模版 string constr = "data source=127.0.0.1\\mysql2008;database=dbtest;integrated ...

  10. CF下的BackgroudWorker组件优化.

    .net compact framwork(2.0/3.5)下没有Backgroundworder组件,在网上找了一个类 经过使用发现了一些问题,主要有一个问题:在一个Dowork事件中对Report ...