Js实现浏览器下标签页间切换触发的事件

原创于 2016-02-25 12:53:20 发布 · 1.5w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器事件

web前端同时被 2 个专栏收录

12 篇文章

订阅专栏

大犀牛JavaScript

6 篇文章

订阅专栏

本文介绍浏览器visibilitychange事件的原理与应用，通过代码示例展示了如何在页面激活与非激活状态间进行判断与响应。

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。


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);