React实现H5手势密码
监测应用进入前后台
在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