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

  1. 妙趣横生的HTML5 Page Visibility API

    起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML ...

  2. 另5个你不知道的HTML5接口API

    原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...

  3. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  4. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  5. HTML5 Storage API

    原文:HTML5 Storage API Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多. 在 ...

  6. HTML5常用API

    .Fullscreen 该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序. .Page Visibility 该API可以用来检测页面对于用户的可见性,即返回用户 ...

  7. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  8. Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  9. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

随机推荐

  1. 【漏洞预警】方程式又一波大规模 0day 攻击泄漏，微软这次要血崩

    一大早起床是不是觉得阳光明媚岁月静好?然而网络空间刚刚诞生了一波核弹级爆炸!Shadow Brokers再次泄露出一份震惊世界的机密文档,其中包含了多个精美的 Windows 远程漏洞利用工具,可以覆 ...

  2. 【ACM-ICPC 2018 沈阳赛区网络预赛】不太敢自称官方的出题人题解

    A. Gudako and Ritsuka 链接 by Yuki & Asm.Def 期望难度:Hard- 考虑从后往前进行博弈动态规划,在这一过程中维护所有的先手必胜区间.区间不妨采用左开右 ...

  3. poj 3630 Phone List 贪心

    Phone List Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23722   Accepted: 7289 Descr ...

  4. Mac安装homebrew安装到指定目录

    第一种直接安装在/usr/local目录下 mac 打开终端输入 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr ...

  5. Git_自定义Git

    在安装Git一节中,我们已经配置了user.name和user.email,实际上,Git还有很多可配置项. 比如,让Git显示颜色,会让命令输出看起来更醒目: $ git config --glob ...

  6. TeamViewer运行在Windows Server 2008下连接时错误提示：正在初始化显示参数

    这个是使用远程桌面安装和使用Teamviewer的问题,解决方法: 实际上安装完成后TeamViewer有两个ID,一个是个人ID(就是上面卡住的780 567 914),另一个是服务器ID,我们通过 ...

  7. 3D数学读书笔记——四元数

    本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/25400659 什么是四元数 ...

  8. ATMEL精妙的IRQ中断处理过程

    A: 从栈地址开始,栈顶为AT91SAM7S64的16K片内RAM尽头0x00204000IRQ_STACK_SIZE = 3*8*4FIQ_STACK_SIZE = 0x004ABT_STACK_S ...

  9. spring Annotation 组件注入

    spring 注解的分类 启动spring自己主动扫描功能 <context:component-scan/> 1.@Repository: 它用于将数据訪问层 (DAO 层 ) 的类标识 ...

  10. 求助关于jquery easyUI中的treegrid组件，请各位帮忙给个思路，谢谢啦

    现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?