js 监听H5页面的可见性变化

最新推荐文章于 2024-12-23 12:24:24 发布

&活在当下&

最新推荐文章于 2024-12-23 12:24:24 发布

阅读量992

点赞数 6

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_30193097/article/details/137969033

博客介绍了HTML5元素中监听文档可见性变化的事件，当元素文档可见性改变时会触发该事件。利用此事件可进行优化操作，如切换标签页或最小化浏览器时停止视频播放等，还给出示例代码，通过监听事件响应页面可见性变化。

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

visibilitychange 是一个事件，用于在 HTML5 的 <iframe>、<object>、<embed> 或 <video> 等元素中监听文档可见性的变化。当这些元素的文档从可见状态变为隐藏状态，或者从隐藏状态变为可见状态时，就会触发该事件。

使用 visibilitychange 事件可以实现一些优化操作，例如：

当用户在浏览器上切换标签页或最小化浏览器时，停止视频播放或暂停动画，以减少不必要的 CPU 和内存消耗。
当用户重新激活页面时，恢复之前暂停的视频播放或动画。

注意：初始化进入页面不会触发visibilitychange事件

以下是一个使用 visibilitychange 事件的示例代码：

let timer = setInterval(function(){
	console.log('倒计时执行了')
},1000)

function handleVisibilityChange() {
  if (document.hidden) {
	// 页面隐藏时执行的操作，例如暂停视频播放
	clearInterval(timer);
	console.log('倒计时停止了')
  } else {
	// 页面可见时执行的操作，例如恢复视频播放
	timer = setInterval(function(){
		console.log('倒计时执行了')
	},1000)
  }
}

// 监听 visibilitychange 事件
document.addEventListener('visibilitychange', handleVisibilityChange);

在上述代码中，通过 document.hidden 属性可以判断当前页面是否处于隐藏状态。如果页面隐藏，则停止计时器；如果页面可见，则开启定时器。通过监听 visibilitychange 事件，可以实现对页面可见性的响应，从而进行相应的操作。