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

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

 

了解后原来是HTML5的visibilitychange事件

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

 

Demo

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

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

 

进一步思考

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

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

 

posted @ 2019-03-26 14:45  talentzemin  阅读(189)  评论(0编辑  收藏  举报