使用html5 visibility api检测页面活动状态
2014-09-17 10:18
274 查看
几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,Win7之前我们都是这样浏览网页的。作为一个程序员,我们经常会同时打开10-15个网页,多的时候超过20个也不足为奇。
早期我们没有办法确定哪些选项卡是活动状态的,但是现在通过HTML Visibility API,我们可以检测访客是否正在浏览我们的界面。
在这个教程中我们会介绍如何使用HTML5 Visibility API,同时我们也为你准备了一个简单的demo来查看页面的状态。在demo中,我们将会根据页面的状态来修改文档的标题。
随着这个API的出现,我们又迎来了两个新的document属性,他们分别是document.visibilityState和document.hidden。
document.visibilityState 有四个可选值:
hidden: 页面在任何屏幕上都没有被浏览。
prerender: 页面在选项卡中,但访客现在没有在这个选项卡上。
visible: 访客正在浏览。
unloaded: 页面已经被加载过了,现在跳转在其它界面上了。
document.hidden是一个布尔类型的属性。
现在我们可以根据页面状态来控制我们的网站了。
现在我们可以马上知道我们页面的availability属性了。但是首先我们要做的是监听这个事件,这样一来我们就可以做出相应的事情。我已经写好了一个简单的监听事件:
这段代码非常简单,只是检测页面的状态。但是你必须清楚这两个属性和方法必须有固定的前缀。因为这个事件和属性有部分浏览器中是基于前缀的。现在我们来看一看上面这些代码的跨浏览器写法的前提:
得到这些前缀之后,我们可以请求所有浏览器的前缀属性和事件,现在我们要做的是改变之前的代码:
下面我举了几个我认为这个API比较适用的地方:
当页面属性是hidden的时候,我们可以禁止调用RSS API。
当页面状态是隐藏的时候,我们可以禁止运动的物体继续运动。
我们可以在页面状态是隐藏的时候在标题上显示一些通知。
我只是大概举了几个例子,有更好主意的可以在评论中告诉大家。下面我们使用这个API写一些实例。
Demo 1: 这个例子在页面状态是隐藏的时候改变标题栏内容。查看 Demo
Demo 2: 这个例子演示在页面状态是隐藏的时候,计数量停止计数,可见后继续计数。
这Demo 2中,我们会详细向你介绍它的实现原理:
查看Demo
如果你想让所有的浏览器都支持这个API,我建议你看一下这篇文章。如果想检测当前浏览器是否运行这个API,可以看一看Detect
Support for Various HTML5 Features.。到目前为止,我们已经可以很好的在各个浏览器中使用这个功能。
为什么要使用这个API?
早期我们没有办法确定哪些选项卡是活动状态的,但是现在通过HTML Visibility API,我们可以检测访客是否正在浏览我们的界面。在这个教程中我们会介绍如何使用HTML5 Visibility API,同时我们也为你准备了一个简单的demo来查看页面的状态。在demo中,我们将会根据页面的状态来修改文档的标题。
查看页面的状态
随着这个API的出现,我们又迎来了两个新的document属性,他们分别是document.visibilityState和document.hidden。document.visibilityState 有四个可选值:
hidden: 页面在任何屏幕上都没有被浏览。
prerender: 页面在选项卡中,但访客现在没有在这个选项卡上。
visible: 访客正在浏览。
unloaded: 页面已经被加载过了,现在跳转在其它界面上了。
document.hidden是一个布尔类型的属性。
现在我们可以根据页面状态来控制我们的网站了。
现在我们可以马上知道我们页面的availability属性了。但是首先我们要做的是监听这个事件,这样一来我们就可以做出相应的事情。我已经写好了一个简单的监听事件:
document.addEventListener('visibilitychange', function(event) { if (!document.hidden) { // The page is visible. } else { // The page is hidden. } });
这段代码非常简单,只是检测页面的状态。但是你必须清楚这两个属性和方法必须有固定的前缀。因为这个事件和属性有部分浏览器中是基于前缀的。现在我们来看一看上面这些代码的跨浏览器写法的前提:
// Get Browser-Specifc Prefix function getBrowserPrefix() { // Check for the unprefixed property. if ('hidden' in document) { return null; } // All the possible prefixes. var browserPrefixes = ['moz', 'ms', 'o', 'webkit']; for (var i = 0; i < browserPrefixes.length; i++) { var prefix = browserPrefixes[i] + 'Hidden'; if (prefix in document) { return browserPrefixes[i]; } } // The API is not supported in browser. return null; } // Get Browser Specific Hidden Property function hiddenProperty(prefix) { if (prefix) { return prefix + 'Hidden'; } else { return 'hidden'; } } // Get Browser Specific Visibility State function visibilityState(prefix) { if (prefix) { return prefix + 'VisibilityState'; } else { return 'visibilityState'; } } // Get Browser Specific Event function visibilityEvent(prefix) { if (prefix) { return prefix + 'visibilitychange'; } else { return 'visibilitychange'; } }
得到这些前缀之后,我们可以请求所有浏览器的前缀属性和事件,现在我们要做的是改变之前的代码:
// Get Browser Prefix var prefix = getBrowserPrefix(); var hidden = hiddenProperty(prefix); var visibilityState = visibilityState(prefix); var visibilityEvent = visibilityEvent(prefix); document.addEventListener(visibilityEvent, function(event) { if (!document[hidden]) { // The page is visible. } else { // The page is hidden. } });
我们可以在哪里使用这个API?
下面我举了几个我认为这个API比较适用的地方:当页面属性是hidden的时候,我们可以禁止调用RSS API。
当页面状态是隐藏的时候,我们可以禁止运动的物体继续运动。
我们可以在页面状态是隐藏的时候在标题上显示一些通知。
我只是大概举了几个例子,有更好主意的可以在评论中告诉大家。下面我们使用这个API写一些实例。
例子
Demo 1: 这个例子在页面状态是隐藏的时候改变标题栏内容。查看 DemoDemo 2: 这个例子演示在页面状态是隐藏的时候,计数量停止计数,可见后继续计数。
这Demo 2中,我们会详细向你介绍它的实现原理:
HTML代码
<!-- This element will show updated count --> <h1 id="valueContainer">0</h1>
JavaScript代码
<script type="text/javascript"> // Get Browser Prefix var prefix = getBrowserPrefix(); var hidden = hiddenProperty(prefix); var visibilityState = visibilityState(prefix); var visibilityEvent = visibilityEvent(prefix); var timer = null; function increaseVal() { var newVal = parseInt($('#valueContainer').text()) + parseInt(1); $('#valueContainer').text(newVal); document.title = newVal + ': Running'; timer = setTimeout(function() { increaseVal(); }, 1); } // Visibility Change document.addEventListener(visibilityEvent, function(event) { if (document[hidden]) { clearTimeout(timer); var val = parseInt($('#valueContainer').text()); document.title = val + ': Pause'; } else { increaseVal(); } }); increaseVal(); </script>
查看Demo
浏览器支持
如果你想让所有的浏览器都支持这个API,我建议你看一下这篇文章。如果想检测当前浏览器是否运行这个API,可以看一看DetectSupport for Various HTML5 Features.。到目前为止,我们已经可以很好的在各个浏览器中使用这个功能。
相关文章推荐
- 通过HTML5 Visibility API检测页面活动状态
- 通过HTML5 Visibility API检测页面活动状态
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- java和struts使用中的一点总结--关于写在页面上的select域的选项选中后保存状态的办法!
- ASP.NET页面状态管理——ViewState的使用
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- 页面内iframe嵌套使用导致浏览器进度条始终处于loading状态
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- ASP.NET页面状态管理——ViewState的使用
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)