web的页面可见性——visibilityChange | document.hidden

最新推荐文章于 2024-03-30 09:41:20 发布

minisal

最新推荐文章于 2024-03-30 09:41:20 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/xx_yan/article/details/105159648

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

Page Visibility API允许开发者监听页面的可见性变化，通过visibilitychange事件和document.hidden属性来判断页面是否可见，从而优化资源使用和性能。当页面不可见时，如后台标签页或最小化，document.hidden设为true，反之设为false。document.visibilityState属性提供页面的可见性状态详情，包括'visible', 'hidden', 'prerender'等。此API常用于控制视频播放等场景。" 107016152,5750532,Liferay Dynamic Query 实践指南,"['Liferay开发', 'ORM框架', '数据库查询']

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

因为有了带标签页的浏览器，页面可以处于后台并且对于用户不可见。Page Visibility API提供了监听document变为可见或者不可见的事件触发，也提供了表示当前页面可见行状态的属性。
这个API在保存资源和提高性能时非常有用，因为它可以避免在document处于不可见状态时，执行不必要的的任务。

的可见性状态和document一样。使用CSS属性(display: none)将隐藏时，`不会触发`任何可见性事件或者更改frame中的可见性状态。

页面可见

visiblechange事件

当页面被最小化或者变成后台标签页时，页面为不可见状态。浏览器会在document触发一个visibilitychange事件，并且设置属性document.hidden = true；
当打开页面或者点击标签页，即页面展示时，页面为可见状态。浏览器也会在document触发一个visibilitychange事件，并且设置属性document.hidden = false；
（hidden为只读属性）

document.visibilityState属性

visibilitychange事件中没有包含页面的可见性状态，但是只读属性document.visibilityState可以获取到这个值。
可能的取值为

“visible” 页面至少部分可见，
1. 页面处于一个非最小化的前台标签页
“hiddin” 页面内容不可见
1. document的标签页处于后台
2. 窗口被最小化
3. 设备的屏幕被关闭。
“prerender”
页面的内容处于预渲染过程中，因为对用户不可见。document都从prerender状态开始，但是不能从其他任何状态再变为这个状态，因此ducument只能被预渲染一次。
“unloaded”
页面正在从内存中加载。

不是所有浏览器都支持unloaded

document.addEventListener(“visibilitychange”, handleVisibilityChange, false);

实例

跳出页面后暂停视频播放
打开页面后播放视屏内容

document.addEventListener("visibilitychange", function() { // 监测visibilitychange的事件
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 以及以后的版本支持此属性 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Chrome
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause(); // 页面隐藏时暂停视频
  } else {
    videoElement.play();  // 页面显示时播放视频
  }
}

if (typeof document.addEventListener === "undefined" || hidden === undefined) { // 对不支持Page Visibility API的浏览器发出警告
  console.log("本浏览器不支持the Page Visibility API.");
} else {
  document.addEventListener(visibilityChange, handleVisibilityChange, false); // 支持Page Visibility API处理页面可见性
    
  // 更改浏览器的标题
  videoElement.addEventListener("pause", function(){
    document.title = '暂停';
  }, false);
    
  videoElement.addEventListener("play", function(){
    document.title = '播放'; 
  }, false);

}