监测应用进入前后台

在JavaScript中，监听H5页面是否在前台或后台运行，主要依赖于Page Visibility API。这个API在大多数现代浏览器中都是支持的，包括苹果的Safari和谷歌的Chrome（也就基本覆盖了Android和iOS平台）。下面是一个简单的示例代码，展示如何使用这个API来判断页面的可见性状态：

// 页面可见性变化时触发的事件处理函数
function handleVisibilityChange() {
   
    if (document.visibilityState === 'hidden') {
   
        // 当页面进入后台时的操作
        console.log('页面进入后台');
    } else if (document.visibilityState === 'visible') {
   
        // 当页面从后台回到前台时的操作
        console.log('页面从后台回到前台');
    }
}

// 给文档添加可见性状态变化的监听器
document.addEventListener('visibilitychange', handleVisibilityChange);

// 初始化时检查一次页面状态
handleVisibilityChange();

这段代码首先定义了一个handleVisibilityChange函数，该函数会在页面的visibilityState发生变化时被调用。visibilityState可以是visible、hidden、prerender或unloaded等值，这里我们主要关注visible和hidden两种状态，分别代表页面在前台和后台。

然后，通过document.addEventListener给文档注册了一个监听器，用于监听visibilitychange事件。最后，调用一次handleVisibilityChange