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

我会带着你远行 2022-08-12 01:29 79阅读 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 条评论，79人围观）

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

相关阅读

相关 HTML5历史状态管理history API-pushState/replaceState与popstate事件

JAX技术对我们前端产生了巨大影响可以让我们的页面无刷新操作减少网络请求但是它也产生了一些问题不能够使用浏览器的前进与后退（后退是浏览器非常常用的...

小灰灰/ 2024年04月18日 02:39/ 0 赞/ 55 阅读

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

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

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

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

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

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

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

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

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

相关 HTML5 Mobile页面

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

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

相关 HTML5 文件API

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

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

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

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

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

相关 Html5 适用API

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

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

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

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

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

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

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

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