对API的页面切换激活的HTML5的pagevisibility的初步研究

HTML5的推出非常特殊API页面的可见性,它之所以特殊,是这个API主要集中于一些功能--,--浏览器标签(tab),被激活。在这里你必须解释这激活指的是标签是否被用户看,或是在当前标签。

那么,这个API有什么用途呢通常,在用户的传统页面许多没有激活它,它将继续工作,例如,当用户浏览门户网站的新闻,他打开直到NBA比赛将继续刷新页面来获得最新的结果,视频网站将继续占据带宽负载资源,所以如果这些太多不必要的工作会造成大量的资源浪费。因此,货物是很有用的:

Web程序每隔一段时间自动更新页面信息,以确保用户获得及时信息,但当用户浏览其他页面时,他们可以控制其暂停更新。
视频网站在播放视频时,会连续播放视频,但当用户浏览其他页面时,可以暂停视频资源,节省带宽。
网站首页有一个大幻灯片。当用户浏览其他页面时,您可以停止播放。
因此,通过页面可见性,我们可以实现至少一个或多个以下好处:

1。保存服务器资源时,常常忽略对这种服务器资源占用的Ajax轮询,关闭此类请求可以节省资源。
2。节省内存消耗。
三.节省带宽消耗。


因此,使用页面可见性对用户和服务器都是有益的。

那么API正式介绍。页面的可见性添加两个属性,隐藏和visibilitystate,在浏览器的文档对象。如果当前标签被激活,对document.hidden的值为假,否则true.visibilitystate有4个可能的值:

隐藏:隐藏的visibilitystate值是当浏览器最小化,标签切换,和电脑锁屏
可见:当浏览器的顶部上下文(上下文)文档被显示在至少一个屏幕上时,它返回到可见状态。当浏览器窗口没有最小化,但浏览器被其他应用程序阻塞时,它也是可见的。
PreRender:当一个文件被加载在屏幕或是不可见的,文档返回控件。这是一个非本质属性,浏览器可以选择性地支持它。
卸载:当文档将被保留(卸载)返回卸载时,浏览器也可以选择性地支持此属性。
此外,该visibilitychange事件被添加到文档,并触发事件时,该文件的能见度变化。

好了,完成属性,放一个demo(打开开关标签测试)。

此演示程序的作用是监视标签的可见性是否发生变化,并在标签可见性发生变化时生成提示。

值得注意的是,目前,浏览器支持页面的可见性或通过私人财产,因此需要对私有财产的检测或使用所提供的可视页面浏览器添加前缀,如visibilitystate属性检测以上的浏览器,你需要检测document.webkitvisibilitystate代替document.visibilitystate.so、浏览器类型是演示先检测,然后页面可见性API的使用。主要代码如下:

Javascript代码将内容复制到剪贴板。


功能browerkernel(){

VaR结果;

{ 'webkit ','moz,O,'ms},foreach(功能(前缀){)

如果(typeof文件{前缀+隐藏}!= 'undefined){
结果=前缀;
}
});

返回结果;

}

函数init(){

前缀= browerkernel();

无功showtip = document.getelementbyid('showtip);

Document.addEventListener(前缀+ 'visibilitychange,功能onvisibilitychange(e){

var = null;

如果(文件{ } = =前缀+ 'visibilitystate '隐藏')提示= '左'页;
如果(文件{前缀+ 'visibilitystate} = = 'visible)提示=进入页面;

showtip.innerhtml = showtip.innerhtml +小费;
});
}

在window.onload = init();





再看一个具体的例子,代码如下所示:

Javascript代码将内容复制到剪贴板。






定时器= 0;
函数onload(){
Document.addEventListener(visibilitychange
Document.addEventListener(webkitvisibilitychange
Document.addEventListener(msvisibilitychange
}
功能statechanged(){
console.log(文档。webkitvisibilitystate);
如果(document.hidden document.webkithidden document.mshidden | | | |){
新选项卡或窗口最小化
定时器=新的日期()GetTime();
}
{其他
提醒(你是离开+(New Date()GetTime()GetTime()-计时器)/ 1000 +秒。)
}
}









在上面的代码中,同样,运行Chrome的加载事件,听取相关webkitvisibilitychange事件(Chrome),如果IE 10,msvisibilitychange事件,然后在回调函数,来计算页面的时间的用户,所以当你打开其他标签。或者最小化,然后切换回原来的页面,Javascript会弹出显示:你离开页面多久了。
应该指出的是,在Chrome中,物业称webkithidden,和事件webkitvisibilitychange事件,而在IE 10中,属性是mshidden和msvisibilitystate ..