方法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. Cisco(思科)路由器静态路由的配置

    实验拓扑 实验步骤 我们要使得 1.1.1.0/24.2.2.2.0/24.3.3.3.0/24 网络之间能够互相通信. (1)  步骤 1:在各路由器上配置 IP 地址.保证直连链路的连通性 R1( ...

  2. 今天再分享一个TextView内容风格化的类

    /* * Copyright (C) 2014 Jason Fang ( ijasonfang@gmail.com ) * * Licensed under the Apache License, V ...

  3. Flask的部署

    当前对部署flask的一些学习: 1.全局安装nginx 1.1 nginx的配置文件怎么写? $ sudo rm /etc/nginx/sites-enabled/default $ sudo to ...

  4. java.lang.IllegalArgumentException: Service Intent must be explicit: Intent

    在Activity中启动Service的时候报错: 服务意图必须是显性声明. 这是为了防止造成冲突(i.e. 有多个Service用同样的intent-filter的情况) 这是Android 5.0 ...

  5. Android 自学之画廊视图(Gallery)功能和用法

    Gallery与之前讲的Spinner有共同的父类:AbsSpinner,表明Gallery和Spinner都是一个列表框.他们之间的区别在于Spinner显示的是一个垂直的列表框,而Gallery显 ...

  6. MySQL 更改默认编码为 utf8 （转）

      转自blog.sina.com.cn/s/blog_4c451e0e0100vefm.html 1.打开MySQL安装目录找到 my.ini,如:C:\Program Files\MySQL\My ...

  7. 【策略】UVa 11389 - The Bus Driver Problem

    题意: 有司机,下午路线,晚上路线各n个.给每个司机恰好分配一个下午路线和晚上路线.给出行驶每条路线的时间,如果司机开车时间超过d,则要付加班费d×r.问如何分配路线才能使加班费最少. 虽然代码看起来 ...

  8. 高可用软件Keepalived

    关于高可用软件Keepalived的使用及配置请参见:http://www.voidcn.com/blog/9124573/article/p-5990263.html

  9. 限制特定ip访问oracle

    在9i中真正起作用的是sqlnet.ora文件,我们修改sqlnet.ora其实是最好最快的方法. 在sqlnet.ora中增加如下部分 ----------------------------- # ...

  10. sharepoint 中用自带的download.aspx实现文件的下载，中文文件名编码的问题

    ]中的路径绑定的是下载路径,用到了sharepoint中自带的download.aspx下载页面,只要将文件的URL赋值给sourceurl即可,但是我前台用的是<a>标签的href来导向 ...