js监测页面可见性

检测页面的可见性状态

在JavaScript中，你可以使用Page Visibility API来检测页面的可见性状态。这个API提供了一组接口，允许你获取页面的可见性状态，并监听其变化。（在手机端好用，PC端切换浏览器标签页/窗口时也好用，但是切换应用不行）

document.visibilityState:

这个属性返回一个字符串，表示文档的可见性状态。可能的值有：

1. visible : 页面是可见的；
2. hidden : 页面是不可见的；
3. “prerender”：页面正在被预渲染（这个状态在某些浏览器中可能不受支持）。

document.hidden

这是一个布尔值，true 表示页面不可见，false 表示页面可见。它是 document.visibilityState 的一个简便属性，只检查页面是否可见或不可见。

visibilitychange 事件

你可以监听这个事件来检测页面可见性状态的变化。

// 获取初始的可见性状态
function handleVisibilityChange() {
  if (document.hidden) {
    console.log("页面现在是不可见的");
    // 在这里执行页面不可见时的操作，比如暂停视频播放、减少资源消耗等
  } else {
    console.log("页面现在是可见的");
    // 在这里执行页面可见时的操作，比如恢复视频播放、更新内容等
  }
}

// 在页面加载时检查一次可见性状态
handleVisibilityChange();

// 添加一个事件监听器来监听可见性状态的变化
document.addEventListener("visibilitychange", handleVisibilityChange, false);

js 检测页面切换至别的应用

在JavaScript中，检测用户是否将页面切换至别的应用（即页面失去焦点或浏览器标签页/窗口失去焦点）通常可以通过监听 blur 事件来实现。blur 事件会在元素（在这种情况下是 window 对象）失去焦点时触发。对于开发者来说，在页面切换到控制台时也会触发失焦，反之也会触发focus

// 当页面失去焦点时执行的函数
function onBlur() {
    console.log("页面已失去焦点");
    // 在这里可以添加你想要执行的代码，比如暂停视频播放、保存草稿等
}

// 当页面获得焦点时执行的函数（可选）
function onFocus() {
    console.log("页面已获得焦点");
    // 在这里可以添加你想要执行的代码，比如恢复视频播放等
}

// 为 window 对象添加 blur 和 focus 事件监听器
window.addEventListener('blur', onBlur);
window.addEventListener('focus', onFocus);