详细介绍及使用HTML5visibilitystate属性

HTML5已经推出了一个非常特殊的API页面可见性。它之所以特殊是因为API关注的是一个很少有人注意到的功能。浏览器标签(TAB)激活了吗





这里必须解释这个激活指的是用户是否正在查看标签,或者它是否是当前标签。

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

1、Web程序每隔一段时间自动更新页面信息,以确保用户获得及时信息,但当用户浏览其他页面时,他们可以控制其暂停更新。

2。视频网站在播放视频时,会连续播放视频,但当用户浏览其他页面时,可以暂停视频资源,节省带宽。

3页的主页上有一个大幻灯片。网站.当用户浏览其他页面时,您可以停止播放。

因此,通过页面可见性,我们可以实现至少一个或多个以下好处:

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

2。节省内存消耗。

三.节省带宽消耗。

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

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

1.hidden:的visibilitystate价值是隐藏在浏览器最小化,标签切换,和电脑锁屏

2.visible:当浏览器的顶部的上下文(上下文)文件显示至少有一个屏幕,它返回到可见的。当浏览器窗口没有最小化,但浏览器被其他应用程序阻塞时,它也是可见的。

3.prerender:当文件被加载到屏幕或控件是不可见的,这是一个非本质属性,浏览器可以选择性地支持。

4.unloaded:当文件要离开(卸载)返回卸载,浏览器也可以有选择地支持该属性

此外,该visibilitychange事件被添加到文档,并触发事件时,该文件的能见度变化。

那么,介绍属性,放置一个用例(拷贝代码保存到一个HTML文件,然后切换标签来测试效果)。


复制代码代码如下所示:









测试HTML5页面可见性API








功能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();







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

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