早些时候,我们的浏览器不具有选项卡式浏览功能,但今天,当您查看所有可用的浏览器时,我们可以看到所有浏览器都提供该功能。作为一名程序员,我通常一次打开 10-15 个选项卡,有时这个数字会超过 25-30 个。
为什么使用此 API?
之前,无法确定哪个选项卡处于活动状态、哪个选项卡处于活动状态,但借助 HTML5 Visibility API,我们可以检测访问者是否正在查看我们的网页。
在本教程中,我们将了解如何处理 HTML5 Visibility API 以及一个简单的演示来发现页面的状态。在此演示中,我们将根据页面可见性状态更改文档标题。
检查页面的可见性状态
随着此 API 的推出,我们迎来了两个新的文档属性,它们具有两种不同的功能。第一个是 document.visibilityState,第二个是 document.hidden。
document.visibilityState 包含四个不同的值,如下所示:
- 隐藏:页面在任何屏幕上都不可见
-
预渲染:页面在屏幕外加载并且对用户不可见
-
可见:页面可见
-
已卸载:页面即将卸载(用户正在离开当前页面)
document.hidden 是布尔属性,如果页面可见则设置为 false,如果页面隐藏则设置为 true。
现在,当我们的网站对用户隐藏时,我们可以控制网站的行为方式。
我们立刻就知道了我们的可用性属性,但现在是时候侦听该事件了,以便我们可以收到有关页面可见性的新情况的通知。这是通过 visibilitychange 事件完成的。我们将看到有关如何处理此事件的快速演示。
document.addEventListener('visibilitychange', function(event) { if (!document.hidden) { // The page is visible. } else { // The page is hidden. } });登录后复制
本文地址:http://ezhuoer.com