HTML5事件—visibilitychange 页面可见性改变事件

时间:2022-01-31 04:03:55

转:https://blog.csdn.net/yusirxiaer/article/details/73480916

又看到一个很有意思的HTML5事件

visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等。虽然这只是一个简单的功能,但是能够广大的采用HTML5开发游戏的开发者提供方便,比如用户正在玩游戏时,突然切换到后台去发一条短信或打一个电话,再切换到游戏,那么开发者就需要捕捉对这些突发情形进行处理,当游戏切换到后台时就暂停游戏,从后台切换回来时,又能允许用户继续游戏。

通过document的hidden属性可以判断标签是否可见。true时代表标签不可见。 
这个事件适合在标签不可见的时候减少网络请求、服务器压力等,也可以做一些好玩的事情,比如改变网页标题的文字。

 document.addEventListener("visibilitychange", function(){
document.title = document.hidden ? "用户离开了" : "用户回来了";
});