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

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

1. 第一行你想的没错就是兼容。

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

3. document.hidden这个如果不明白，去查MDN，正常情况下你会找到这个，剩下不明白的答案大都在这里边了。