HTML5 Page Visibility

作者:分分快三计划
  • 网址有图片轮播效果,唯有在客户见到轮播的时候,才会活动展现下大器晚成显示音信。
  • 仪表盘的应用程序不指望在页面不可以见到时轮询服务器举办更新。
  • 页面想要检查测验是还是不是正在渲染,以便能够规范的计算网页浏览量
  • 当设备步入待机格局时,网址想要关闭设备声音(客户按下电源键关闭荧屏卡塔尔国
  • 可接收于录像站点,当客户走入页面播放,离开页面暂停。
  • 可利用于登陆同步
  • 可用于计算在线时间长度。
  • 在线闲聊离开状态。
  • 再有部分切换效果,譬喻说,每一回客户切换来你那么些页面上的时候,logo抖一下,或页面意气风发道亮光闪过,大概其余成效

正文只是个引子,简介底蕴运用,更为复杂的应用和效果我们自行完成。

如何利用?

上边写一个乘除在线时间长度的例证:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0 : run</title>
</head>
<body>
<h1>你在页面停留的时间为 0 s</h1>
<h1>这是你第 0 次离开又回来了。</h1>
<script>
    var i = 0,
            count = 0,
            si = setInterval(function () {
                document.querySelector('#time').innerHTML =   i;
                document.title = i   ' : run';
            }, 1000);
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) {
            clearInterval(si);
            document.title = i   ' : pause';
        } else {
            document.querySelector('#count').innerHTML =   count;
            si = setInterval(function () {
                document.querySelector('#time').innerHTML =   i;
                document.title = i   ' : run';
            }, 1000);
        }
    });
</script>
</body>
</html>
  • visible : 页面内容最少是有的可以预知,非最小化窗口的前途选项卡。
  • hidden : 页面内容对客户不可以知道,可以是二个后台标签,或是最小化窗口的意气风发有的,或是在操作系统锁屏激活的状态下。
  • prerender : 页面内容正在被预渲染且未有对顾客是不可以预知的
  • unloaded : 页面正在从内部存款和储蓄器中卸载。

document.hidden 依照浏览器窗口的情形重回布尔值 true 或 false。

document.visibilityState存储具体的处境字符串。意气风发共有多种情形:

Page Visibility API的正经很简短,独有三个属性:

上例代码大体是:当页面可知时,计时停留的流年,当页面不可以见到时,反应计时器甘休,页面标题与之一齐(切换标签页时注意标题卡塔 尔(阿拉伯语:قطر‎。再一次重临页面,继续计时何况出示当前偏离又回到的次数。

页面可以预知性(Page Visibility卡塔尔API能够有哪些用处

什么是 Page Visibility ?
Page Visibility 即页面可以预知性,通过 visibilityState 的值检查实验页面当前是或不是可以知道。当二个网址是可以知道或点击选中的境况时 Page Visibility API 能够让您拿走到这种意况,当客商最小化网页依然浏览到别的标签的网页时,API将发送三个有关当前页面包车型地铁可以见到音信的风浪vibilitychange。你可以检查实验该事件然后推行一些运动大概体现分裂的法力。那几个API在节约资源上是丰裕有效的,当网页不可以预知时,这些API通过提须要开荒者能够操作不必需的职分的接口。比如,假诺您的网址正在播放二个录制,只怕当顾客浏览别的浏览器时它可以暂停,那么当客户切换回来的时候,就可以继续播放了。顾客能够三番三回观察,不会因为浏览别的的浏览器招致错失当前摄像的进度。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划