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

Travelling1006

于 2019-03-26 14:45:00 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/talentzemin/p/10600051.html

版权

本文介绍了HTML5中visibilitychange事件的使用方法，通过实例展示了如何利用该事件改变页面标题，以及如何在用户切换选项卡时自动控制在线视频的播放状态，以此提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

了解后原来是HTML5的visibilitychange事件

Demo

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

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

进一步思考

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

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

转载于:https://www.cnblogs.com/talentzemin/p/10600051.html