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

页面可见性（Page Visibility）API可以有哪些用途

  • 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一显示信息。
  • 仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
  • 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
  • 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）
  • 可应用于视频站点，当用户进入页面播放，离开页面暂停。
  • 可应用于登录同步
  • 可用于计算在线时长。
  • 在线聊天离开状态。
  • 还有一些切换效果，比方说，每次用户切换到你这个页面上的时候，logo抖一下，或页面一道亮光闪过，或者其他效果

如何使用？

Page Visibility API的规范很简单，只有两个属性：

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

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

  • visible : 页面内容至少是部分可见，非最小化窗口的前景选项卡。
  • hidden : 页面内容对用户不可见，可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
  • prerender : 页面内容正在被预渲染且没有对用户是不可见的
  • unloaded : 页面正在从内存中卸载。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>0 : run</title>

</head>

<body>

<h1>你在页面停留的时间为 <span id="time">0</span> s</h1>

<h1>这是你第 <span id="count">0</span> 次离开又回来了。</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>

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

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

HTML5 Page Visibility的更多相关文章

  1. 妙趣横生的HTML5 Page Visibility API

    起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML ...

  2. 拥抱HTML5 — Page Visibility(页面可见性) API介绍

    H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...

  3. Page Visibility实现焦点丢失提醒

    0.前言 HTML5 Page Visibility API是一个很实用的特性.当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其它耗费内存的操作,等用户回来时.再继续这些操作. 当然,最 ...

  4. Page Visibility(页面可见性) API介绍、微拓展[转]

    一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位 ...

  5. Page Visibility(网页可见性) API与登录同步引导页实例页面

    页面1  HTML代码: <p id="loginInfo"></p> JS代码: (function() {     if (typeof pageVis ...

  6. 页面可见生Page Visibility

    Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...

  7. H5的Page Visibility API

    概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...

  8. H5 之 Page Visibility

    这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决. Page Visibility API 可以让你获取到这种状态 ...

  9. Page Visibility API

    在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态 ...

随机推荐

  1. 百度MIP移动页面加速——不只是CDN

    MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...

  2. Enterprise Solution 3.1 企业应用开发框架 .NET ERP/CRM/MIS 开发框架，C/S架构，SQL Server + ORM(LLBL Gen Pro) + Infragistics WinForms

    行业:基于数据库的制造行业管理软件,包含ERP.MRP.CRM.MIS.MES等企业管理软件 数据库平台:SQL Server 2005或以上 系统架构:C/S 开发技术 序号 领域 技术 1 数据库 ...

  3. SQLServer地址搜索性能优化例子

    这是一个很久以前的例子,现在在整理资料时无意发现,就拿出来再改写分享. 1.需求 1.1 基本需求: 根据输入的地址关键字,搜索出完整的地址路径,耗时要控制在几十毫秒内. 1.2 数据库地址表结构和数 ...

  4. category中重写方法?

    问:可以在category中重写方法吗? 答:代码上可以实现 在category中重写方法,但在实际开发中,不建议这样做.如果确实需要重写原有方法也建议使用子类进行重写. category是为了更方便 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（66）-MVC WebApi 用户验证 (2)

    系列目录 前言: 回顾上一节,我们利用webapi简单的登录并进行了同域访问与跨域访问来获得Token,您可以跳转到上一节下载代码来一起动手. 继续上一篇的文章,我们接下来演示利用拿到的Token来访 ...

  6. .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的？

    配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置:第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置.要了解配置同步机制的实现原理,先得从认识一个 ...

  7. SQL Server-聚焦UNIOL ALL/UNION查询（二十三）

    前言 本节我们来看看有关查询中UNION和UNION ALL的问题,简短的内容,深入的理解,Always to review the basics. 初探UNION和UNION ALL 首先我们过一遍 ...

  8. 在vim中使用查找命令查找指定字符串

    要自当前光标位置向上搜索,请使用以下命令:         /pattern   Enter           其中,pattern   表示要搜索的特定字符序列.         要自当前光标位置 ...

  9. 通过sails和阿里大于实现短信验证

    通过sails与阿里大于来实现注册短信验证码的发送,逻辑图如下 1.用户在客户端发送手机号给服务器,服务器接收到手机号,生成对应时间戳,随机四位数验证码 2.服务器将电话号码和验证码告诉阿里大于服务器 ...

  10. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...