HTML5新API-visibilityState

1、介绍visibilityState

这是一个HTML5新提供的一个api，主要作用就是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指的是当前标签是否正在被用户浏览。

2、应用场景

监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。

3、属性与事件

HTML5中专门为document元素添加了相关属性和事件：

属性：document.visibilityState

事件：document.addEventListener( "visibilitychange" , function(){})

4、实例

当用户在浏览器标签页间切换时，监控当前页面的状态，是否为最上层标签，决定是否开始or暂停视频：

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
</head>
<body>
　　<div class="con"></div> 
</body>


<script src="jquery/jquery-2.2.3.js"></script>
<script type="text/javascript">

　　document.addEventListener("visibilitychange",function(){

　　　　if(document.visibilityState=="visible"){
　　　　　　console.log("欢迎回来！")

　　　　　　//do something

　　　　　　//继续视频播放
　　　　}
　　　　if(document.visibilityState=="hidden"){
　　　　　　console.log("不要走！")

　　　　　　//do something else

　　　　　　//暂停视频播放
　　　　}

　　})
</script>
</html>

　　

posted @ 2018-11-19 17:03  samirah  阅读(249)  评论(0)  编辑  收藏  举报