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

2024-05-10 22:35:35

几年前，我们浏览网页的时候是没有选项卡浏览模式的，每一个网页都会是一个浏览器窗口，如果我没有记错，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检测页面活动状态

转载于:https://www.cnblogs.com/gbin1/p/3974755.html

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

HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验
页面可见性API可以让你知道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
HTML5使用Geoloacation API检测浏览器的支持性
HTML5使用Geoloacation API检测浏览器的支持性在调用HTML5 Deolocation API函数前,需要确保浏览器支持此功能.当浏览器不支持时,可以提供一些替代文本,以提示用户升 ...
另5个你不知道的HTML5接口API
原文地址: 5 More HTML5 APIs You Didn't Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日翻译日期: 2013年08月13日 ...
浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
为什么80%的码农都做不了架构师?>>> 日期:2012-4-17 来源:GBin1.com 在线演示本地下载大家是不是在开发设计过程中遇到如下情况?某些浏览器不支持H ...
HTML5 FileReader API 测试（一）
2019独角兽企业重金招聘Python工程师标准>>> 参考文章 html5之FileReader接口 http://zhangyaochun.iteye.com/blog/1487 ...
利用HTML5 LocalStorage实现跨页面通信channel
引言随着Web技术的发展,涌出了越来越多的复杂的应用.诸多Web应用逐渐向增强用户体验方向发展.在诸如付款.在线聊天等场景中,有时需要多页面进行数据通信.以前的实现方法有cookie.服务器中转.F ...
巧用Html5 History Api解决SPA的SEO问题
背景想当年,我做了一个新媒体网站项目(AIISPO,已下线).跟普通资讯网站不一样的是,老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框.瀑布流指的是以瀑布流的形式将文章罗列出来,而模态框则指 ...
html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

最新文章

热门文章