彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-12-07 08:13 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

HTML5 Page Visibility

document.hidden 根据浏览器窗口的状态返回布尔值 true 或 false。

<!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>

Page Visibility API的规范很简单,只有两个属性:

如何使用?

  • visible : 页面内容至少是部分可见,非最小化窗口的前景选项卡。
  • hidden : 页面内容对用户不可见,可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
  • prerender : 页面内容正在被预渲染且没有对用户是不可见的
  • unloaded : 页面正在从内存中卸载。
  • 网站有图片轮播效果,只有在用户观看轮播的时候,才会自动展示下一显示信息。
  • 仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
  • 页面想要检测是否正在渲染,以便可以准确的计算网页浏览量
  • 当设备进入待机模式时,网站想要关闭设备声音(用户按下电源键关闭屏幕)
  • 可应用于视频站点,当用户进入页面播放,离开页面暂停。
  • 可应用于登录同步
  • 可用于计算在线时长。
  • 在线聊天离开状态。
  • 还有一些切换效果,比方说,每次用户切换到你这个页面上的时候,logo抖一下,或页面一道亮光闪过,或者其他效果

本文只是个引子,简单介绍基础使用,更为复杂的应用和效果大家自行实现。

document.visibilityState存储具体的状态字符串。一共有四种状态:

什么是 Page Visibility ?
Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见。当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态,当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件vibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。这个API在节约资源上是非常有用的,当网页不可见时,这个API通过提供给开发者可以操作不必须的任务的接口。比如,如果你的网站正在播放一个视频,也许当用户浏览其他浏览器时它可以暂停,那么当用户切换回来的时候,就可以继续播放了。用户可以继续观看,不会因为浏览其他的浏览器导致丢失当前视频的进度。

下面写一个计算在线时长的例子:

页面可见性(Page Visibility)API可以有哪些用途

上例代码大意是:当页面可见时,计时停留的时间,当页面不可见时,计时器停止,页面标题与之同步(切换标签页时注意标题)。再次返回页面,继续计时并且显示当前离开又回来的次数。

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:HTML5 Page Visibility

关键词: