关于浏览器标签页间切换触发的事件的理解

Question

今天在zealer上看视频发现一个小细节，当用户切换到其他标签页时，页面的视频会暂停。于是在网上查了资料。

http://blog.csdn.net/cczhumin...

代码如下：

var hiddenProperty = 'hidden' in document ? 'hidden' :    

    'webkitHidden' in document ? 'webkitHidden' :    

    'mozHidden' in document ? 'mozHidden' :    

    null;

var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

var onVisibilityChange = function(){

    if (!document[hiddenProperty]) {    

        console.log('页面非激活');

    }else{

        console.log('页面激活')

    }

}

document.addEventListener(visibilityChangeEvent, onVisibilityChange);

我对这段代码不是很理解，第一行大概是针对不同浏览器写的兼容吧，到了第二行就不知道为什么要把hiddenProperty替换成visibilitychange。然后就是document.hidden的含义不是很明白，求解！

Answer 1

第一行你想的没错就是兼容。第二行把'hideen'替换成'visibilitychange'之后还要赋值给变量var visibilityChangeEvent的，之所以要这么换是要承接第一行拿到的浏览器前缀，比如第一行如果是'webkitHidden'的话那这个就会是'webkitvisibilitychange'了。