导言

本文介绍一些新兴的但非常好用的 API

Page Visibility API

不知道用户是不是正在与页面交互 , 这是困扰 web 开发人员的一个主要问题。如果页面最下化或者隐藏在了其他标签页后面,有些功能是可以停下来。
Page Visibility API(页面可见性API)就是为了让开发人员知道页面是否对用户可见而推出的

这个API本身非常简单 ,由以下三部分组成:

document.hidden : 表示页面是否隐藏的布尔值。
document.visibilityState : 表示下列4个可能状态的值:
- 页面在后头标签页中或浏览器最小化
- 页面在前台标签页中
- 实际的页面已经隐藏,但用户可以看到页面的预览
visibilitychange 事件 : 当文档从可见变为不可见或从不可见变为可见时,触发该事件。

<script>
window.addEventListener('visibilitychange',() =>{
    console.log(document.hidden)
    console.log(document.visibilityState)
})
</script>

当页面隐藏的时候 , document.hidden 为 true, document.visibilityState 为 visible.

当页面显示的时候 , document.hidden 为 false, document.visibilityState 为 hidden