大项目小细节---切换选项卡后的操作

之前在浏览一个网站，Title默认是文章的标题，看到一半的时候切换选项卡看其他的页面去了，这时候刚才页面的Title变为“看这里，看这里”。觉得十分有趣。

 

了解后原来是HTML5的visibilitychange事件

MDN:https://developer.mozilla.org/zh-CN/docs/Web/Events/visibilitychange

 

Demo

打开浏览器控制台，把下面代码粘贴进去回车，进行测试

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

 

进一步思考

其实，我们可以利用此事件做一些提升用户体验的事情。

比如网站有在线视频播放，可以在用户切换选项卡后，自动停止播放，再次切换回来继续播放。