几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,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属性了。但是首先我们要做的是监听这个事件,这样一来我们就可以做出相应的事情。我已经写好了一个简单的监听事件:
......
......
相关推荐
加载项以禁用页面可见性API。 如果您当前在另一个窗口中,这可以防止会议系统跟踪。 此插件禁用页面可见性API。 例如,这可防止视频会议系统检测到您是在其选项卡中还是在另一个窗口中。 可以在以下位置找到此插件的...
HTMl5 推出了一个很“特别”的 API Page Visibility ,之所以说它特别,是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下,这个“激活”,指的是这个标签是否正被...
可见性.js 用于使用页面可见性 API 的跨浏览器插件安装下载: : bower install visibility.js Git: git clone https://github.com/alexgibson/visibility.js设置此组件可用作 AMD 模块、CommonJS 模块或全局。 要...
用法watcher = require('visibility')() 创建一个新的EventEmitter ,当页面的可见性状态更改时,该事件将触发特定事件。watcher.hidden() 如果浏览器窗口当前不可见,则返回true 。 如果浏览器不支持Page ...
前端项目-visibility.js,Wrapper for the Page Visibility API
Api-react-page-visibility.zip,声明的、嵌套的、有状态的、同构的页面可见性react componentreact页面可见性,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。...
html5-api-hiddenpage visibility apihtml5 页面可见api,备用
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别,简单的例子代码如下: 复制代码代码如下: <html> ...
检测何时元素在页面上变得可见或隐藏。 赞助商 目录 安装 npm install --save vue-observe-visibility :warning: 该插件使用了并非在所有浏览器中都支持的 (当前在Edge,Firefox和Chrome中受支持)。 您需要包括...
5 Visibility Graphs 136 5.1 Problems and Results 136 5.2 Computing Visibility Graphs of Simple Polygons 138 5.3 Computing Visibility Graphs of Polygons with Holes 143 5.3.1 Worst-Case: O(n2) Algorithm...
WPF的bool2Visibility转换器使用
VISIBILITY属性的详解包括VISIBLE、INVISIBLE及GONE区别
需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现,感兴趣的朋友可以了解下本
display与visibility的区别
Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”、“invisible”、“gone”。主要用来设置控制控件的显示和隐藏。
page-visibility.js 包装器这个小包装器隐藏了供应商前缀,并为浏览器中的可见性API提供了有用的高级API。 几乎所有浏览器都原生Page Visibility API。 对于旧的浏览器,使用焦点/模糊技巧(请注意,当浏览器失去...
本文给大家推荐了5个html5的新型API函数,包括全屏API(Fullscreen API)、页面可见性API(Page Visibility API)、getUserMedia API、电池API(Battery API)、 Link Prefetching。希望大家能有所了解,以方便自己...
通过绑定修改DataGridColumns的Visibility
Modeling Mutual Visibility Relationship in Pedestrian Detection Modeling Mutual Visibility Relationship in Pedestrian Detection Modeling Mutual Visibility Relationship in Pedestrian Detection