可以监听浏览器非当前窗口试试:
我会使用jQuery因为那样你所要做的就是:
$(window).blur(function(){
//your code here});
$(window).focus(function(){
//your code});
可以参考这个:
http://www.imooc.com/wenda/detail/561021
我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放。页面的展示的状态的判断就需要用到html5新增的一个api:document.hidden。
document.hidden属性:bool型,表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化。
visibilitychange事件:当文档的可见性改变时触发。
兼容性写法如下,当在浏览器里切换标签页或者最小化时就会console打印出状态的变化:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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.addEventListener(visibilityChange, function () { console.log( "当前页面是否被隐藏:" + document[hidden]); }, false ); |