页面优化之监听页面隐藏/显示

有些时候我们需要在项目中判断用户是否在浏览当前页面，或者当前页面是否处于激活状态。然后再进行相关的操作。浏览器中可通过window对象的onblur、onfocus判断，或者document的hidden属性判断。

1、window.onblur & window.onfocus
关于是否失焦点，浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是focus过的。也就是说页面刚刚渲染完，用户在没有页面上任何操作时，页面是不会正常监听这两个事件的；或者页面在打开状态下，但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。直到，用户操作页面触发focus，之后离开页面才会触发blur，再次点击到当前页面时才会触发focus，如此反复都会触发相应的事件。

触发onblur事件的情况：
1、在chrome浏览器下，点击console面板也会触发blur事件，同样的，前提是之前是focus的状态。
2、页面最小化；
3、浏览器切换tab页面；
4、页面中的任何弹窗；
5、focus状态下切换到其他应用

触发onfocus的情况：
1、用户存在页面操作（包括页面中js脚本运行。如页面加载完无js运行，用户无操作，则不会触发 ）；
2、onblur事件触发前提下，页面最大化；
3、onblur事件触发前提下，页面 从其他tab页切换回当前页面；

2、document.hidden
hidden是document的属性，可以判断页面是否显示的是当前的页面。visibilitychange事件就是触发页面可见的事件。当然不同的浏览器内核记得要加前缀。表示页面处于非激活状态，反之，处于激活状态。

hidden属性为true的此类情况有：
1、 页面最小化
2、页面在后台运行
3、切换tab栏到其他页面

hidden属性为false的情况
1、当前页面正常显示，包括被其他应用挡住的情况。

visibilitychange事件的兼容性写法
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);

　　

 

这两种判断方法最大的不同就是在页面被其他应用覆盖的情况下，onblur是会触发的，但是visibilitychange不会触发。如果只是判断页面是否是打开状态的话，visibilitychange事件是比较合适的。