前言

本文原文地址,原文链接:http://huxinmin.com

禁止非法采集,原文地址,原文链接:http://huxinmin.com

未经作者同意,谢绝转载,原文链接:http://huxinmin.com

  • 本文原文地址,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

  • 本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 本文出自,原文链接:http://huxinmin.com

  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com
  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com
  • 本文原文地址,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

  • 本文原文地址,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    本文出自,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 本文出自,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 本文原文地址,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com
    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com本文原文地址,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com本文出自,原文链接:http://huxinmin.com本文原文地址,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

  • 本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

  • 本文出自,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
    本文出自,原文链接:http://huxinmin.com
    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com
    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com
  • 本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com
  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 本文原文地址,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 本文原文地址,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

  • 本文出自,原文链接:http://huxinmin.com
  • 未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com
  • 禁止非法采集,原文地址,原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com
    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    本文出自,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com
    本文原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
  • 本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

      本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    本文出自,原文链接:http://huxinmin.com

  • 本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
  • 本文出自,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    本文出自,原文链接:http://huxinmin.com

    对于页面上的有些事件,例如动画,需要在页面切换的时候暂停,切换回来的时候恢复,或者一些提示消息,需要在页面处在激活状态的时候取消提示,切换的时候才显示提示消息,我们就需要监听页面的切换标签页或者失去焦点的事件。

    传统做法

    一般只需要监听页面的聚焦和失焦的事件就可以了:

    window.onfocus = function() {
        isShine = false;
    };
    window.onblur = function() {
        isShine = true;
    };
    // for IE
    document.onfocusin = function() {
        isShine = false;
    };
    document.onfocusout = function() {
        isShine = true;
    };
    

    但是经过我自己实际测试,这个方法并不能很好的检测页面的切换事件,有时候会出现没有响应的情况,那么有没有更好的方法来检测页面的切换事件呢?我们可以使用H5的visibilitychangedocument.hidden来进行判断即可。

    使用

    因为不同的浏览器的visibilitychange的名称可能不一样,所以我们首先来获取一下当前浏览器支持的visibilitychange的名称:

    var stateKey, 
        eventKey, 
        keys = {
            hidden: "visibilitychange",
            webkitHidden: "webkitvisibilitychange",
            mozHidden: "mozvisibilitychange",
            msHidden: "msvisibilitychange"
        };
        for (stateKey in keys) {
            if (stateKey in document) {
                eventKey = keys[stateKey];
                break;
            }
        }
    

    同理,你还需要获取当前浏览器的document.hidden的名称,在循环代码中加入:

        var propertyKey = "";
        for (stateKey in keys) {
            if (stateKey in document) {
                propertyKey =  stateKey ;
                eventKey = keys[stateKey];
                break;
            }
        }
    

    最后只需要添加事件监听即可:

    document.addEventListener(eventKey, function(){
        //如果是聚焦
        if(!document[propertyKey]){
        //你的代码
        }else{
        //你的代码
        }
    });
    

    参考资料