通过HTML5 Visibility API检测页面活动状态

我会带着你远行 2022-08-12 01:29 90阅读 0赞

[![c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg][]][c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg 1]

几年前，我们浏览网页的时候是没有选项卡浏览模式的，每一个网页都会是一个浏览器窗口，如果我没有记错，Win7之前我们都是这样浏览网页的。作为一个程序员，我们经常会同时打开10-15个网页，多的时候超过20个也不足为奇。

## 为什么要使用这个API? ##

早期我们没有办法确定哪些选项卡是活动状态的，但是现在通过HTML Visibility API，我们可以检测访客是否正在浏览我们的界面。

在这个教程中我们会介绍如何使用HTML5 Visibility API，同时我们也为你准备了一个简单的demo来查看页面的状态。在demo中，我们将会根据页面的状态来修改文档的标题。

## 查看页面的状态 ##

随着这个API的出现，我们又迎来了两个新的document属性，他们分别是document.visibilityState和document.hidden。

document.visibilityState 有四个可选值：

*  **hidden:** 页面在任何屏幕上都没有被浏览。
 *  **prerender:** 页面在选项卡中，但访客现在没有在这个选项卡上。
 *  **visible:** 访客正在浏览。
 *  **unloaded:** 页面已经被加载过了，现在跳转在其它界面上了。

document.hidden是一个布尔类型的属性。

> 现在我们可以根据页面状态来控制我们的网站了。

现在我们可以马上知道我们页面的availability属性了。但是首先我们要做的是监听这个事件，这样一来我们就可以做出相应的事情。我已经写好了一个简单的监听事件：

......

......

阅读原文：[通过HTML5 Visibility API检测页面活动状态][HTML5_Visibility_API]

[c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg
[c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg
[HTML5_Visibility_API]: http://www.gbtags.com/gb/share/3863.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 Page Visibility API 检测空闲或活动的浏览器选项卡

在本教程中，我们将使用页面可见性 API 来检测浏览器选项卡是空闲的（当前未被查看）还是活动的。为了了解 API 的工作原理，我们将使用它在选项卡空闲时暂停视频。让我们从设

素颜马尾好姑娘i/ 2024年03月17日 10:57/ 0 赞/ 36 阅读

相关显示隐藏-visibility（HTML、CSS）

显示隐藏-visibility（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

灰太狼/ 2023年10月03日 13:34/ 0 赞/ 21 阅读

相关杂谈：HTML 5页面可视性API

译文来源：[http://www.ido321.com/1126.html][http_www.ido321.com_1126.html] 原文：[HTML5 Page

曾经终败给现在/ 2022年08月13日 14:47/ 0 赞/ 118 阅读

相关通过HTML5 Visibility API检测页面活动状态

[![c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg][]][c8ccaba4-5c17-49ef-bbe5-58c02d64b655.jpg

我会带着你远行/ 2022年08月12日 01:29/ 0 赞/ 91 阅读

相关 HTML5 Mobile页面

<!DOCTYPE html> <html> <head> <title>HTML5 Mobile</title>

柔光的暖阳◎/ 2022年08月07日 14:59/ 0 赞/ 197 阅读

相关 HTML5 文件API

1.FileList对象和file对象 FileList对象表示用户选择的文件列表。在HTML5中，通过multiple属性，file控件内允许一次放置多个文件。控件内的每

向右看齐/ 2022年07月13日 02:18/ 0 赞/ 213 阅读

相关 html5页面中添加腾讯地图api

html5页面中添加腾讯地图api： ![这里写图片描述][70] 点击地图出现详细的地图： ![这里写图片描述][70 1] 这是一个基于微信端的地图处理方案

本是古典何须时尚/ 2022年05月26日 01:41/ 0 赞/ 574 阅读

相关 Html5 适用API

HTML5 新增了许多重要的特性，像 video、audio 和 canvas 等等，这些特性使得能够很容易的网页中包含多媒体内容，而不需要任何的插件或者 API。而其它的新元

你的名字/ 2022年05月19日 00:06/ 0 赞/ 187 阅读

相关论html标签中的style="visibility:visible"

style="visibility:visible" 之前改过一个bug，一个开源的【上传文件】按钮，需求是当上传的文件大于5条的时候，该按钮要隐藏，否则要显示。

「爱情、让人受尽委屈。」/ 2022年04月22日 15:30/ 0 赞/ 169 阅读

相关语音识别系列5-语音活动端点检测（VAD）

语音识别系列7-语音活动端点检测（VAD）一、介绍语音活动端点检测（VAD）已经是一个古老的话题，用于分离信号中语音信号和非语音信号，首先我们讲述VAD的三种做法：1，

╰半夏微凉°/ 2022年01月29日 05:07/ 0 赞/ 728 阅读