页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面;隐藏的页面,就是我们没有看的页面。 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是,把浏览器最小化,所有的页面就都不可见了。

API 很简单,document.hidden 就返回一个布尔值,如果是true, 表示页面可见,false 则表示,页面隐藏。  不同页面之间来回切换,触发visibilitychange事件。 还有一个document.visibilityState, 表示页面所处的状态,取值:visible, hidden 等四个。

document.addEventListener("visibilitychange", function(){
    if(document.hidden){
        document.title ="hidden";
    }else {
        document.title = "visibile";
    }
})

我们打开这个页面,然后再打开另一个页面,来回点击这两个页面,当我们看到这个页面时,标题显示visiable ,当我们看另一个页面时,标题显示hidden;

动画,视频,音频都可以在页面显示时打开,在页面隐藏时关闭。

Page Visibility API(页面可见性)的更多相关文章

  1. Page Visibility API 页面是否获取焦点 Event: visibilitychange

    W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Docum ...

  2. H5的Page Visibility API

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

  3. Page Visibility API

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

  4. 妙趣横生的HTML5 Page Visibility API

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

  5. 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件

    [摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...

  6. HTML5 Page Visibility

    什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...

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

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

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

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

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

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

随机推荐

  1. Python之调用函数

    Python之调用函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数 abs,它接收一个参数. 可以直接从Python的官方网站查 ...

  2. Java maven安装GDAL

    1. 使用编译好的安装jdal http://www.gisinternals.com/release.phpgdal-111-1800-x64-core.msi下载地址:http://downloa ...

  3. 一种构造WEB服务器端recv和send接口阻塞现象的方法

    send阻塞 socket recv send接口阻塞,会导致服务器端不在响应客户端任何请求,所以一般情况, 会将socket设置为非阻塞状态, 但是有些场景,例如ssl_accept就需要使用阻塞的 ...

  4. 帝国CMS列表模板页面内容截取

    $listtemp = '<div class="c_n_item">';$listtemp .= '<div class="c_n_title&quo ...

  5. JSP 运行

    Tomcat 上运行 JSP 应用程序 完成一些包装工作后,才能在 Tomcat 上运行 index.jsp 程序.通常需要按照以下步骤操作: 创建 JSP 应用程序.如果只使用一个页面,则称它为 i ...

  6. LATEX论文排版学习资源汇总

    一.国内出版的LaTeX书籍 不管是ctex还是chinatex论坛,很多TeX前辈和使用者都给大家提供了很多咨询帮助,同时,也分享了很多很多学习上的方法与技巧.一般都推荐入门的用户先阅读一本入门书, ...

  7. Python实现抓取页面上链接

    方法一:  # coding:utf-8 import re import requests # 获取网页内容 r = requests.get('http://www.163.com') data  ...

  8. 使用jquery的imagecropper插件做用户头像上传 兼容移动端

    在移动端开发的过程中,或许会遇到对图片裁剪的问题.当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉. 图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都 ...

  9. php生成随机数的三种方法

    php生成随机数的三种方法 如何用php生成1-10之间的不重复随机数? 例1,使用shuffle函数生成随机数. <?php$arr=range(1,10);shuffle($arr);for ...

  10. 使用 supervisor 管理进程

    安装: # yum install python-setuptools # easy_install supervisor 如果已经安装了epel和python-pip, 也可以简单 pip inst ...