Page Visibility API(页面可见性)
页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面;隐藏的页面,就是我们没有看的页面。 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是,把浏览器最小化,所有的页面就都不可见了。
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(页面可见性)的更多相关文章
- Page Visibility API 页面是否获取焦点 Event: visibilitychange
W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Docum ...
- H5的Page Visibility API
概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...
- Page Visibility API
在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态 ...
- 妙趣横生的HTML5 Page Visibility API
起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML ...
- 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件
[摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...
- HTML5 Page Visibility
什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...
- Page Visibility(页面可见性) API介绍、微拓展[转]
一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位 ...
- 拥抱HTML5 — Page Visibility(页面可见性) API介绍
H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...
- Page Visibility(网页可见性) API与登录同步引导页实例页面
页面1 HTML代码: <p id="loginInfo"></p> JS代码: (function() { if (typeof pageVis ...
随机推荐
- 【java基础学习】GUI
GUI 容器 布局管理器 组件 菜单 事件处理机制
- How to generate ssh key only for github and not conflict with original key
3 生成SSH公钥 $ ssh-keygen -t rsa -C "your_email@youremail.com" #ssh-keygen -t dsa -C "y ...
- play for scala 通过网易smtp发送邮件
最近用play来做一个小项目,里面用到了发送邮件的功能.这里我将这部分抽出来分享,毕竟目前来看paly于scala方面的中文资料在网上还是毕竟少,希望我的这篇文章能为有需要的人提供一点思路. 下面写下 ...
- MapReduce运行过程以及原理
1.map和reduce MapReduce任务过程分为两个处理阶段:map阶段和reduce阶段.每个节点都以键值对作为输入和输出,其类型由程序员来选择.程序员还需要编写两个函数:map函数和red ...
- Hadoop离线项目介绍(不包括程序)
一:项目场景 1.需求分析 根据用户行为数据进行程序的处理,得到结果保存到关系型数据库中 需要收集用户(系统使用者)在不同客户端上产生的用户行为数据,最终保存到hdfs上 需要明确收集字段的相关信息, ...
- ios数据库常用sql语句
SQlite常用语句 由于sql语句在程序代码中以字符串的形式存在,没有代码提示,不细心很容易出错,而且不容易被查出来.sql语句字符串是单引号. 写sql语句的时候一定要细心呀.如果写不好可以找公司 ...
- 深入浅出Docker(一):Docker核心技术预览
Docker是PaaS供应商dotCloud开源的一个基于LXC 的高级容器引擎,源代码托管在 GitHub 上, 基于Go语言开发并遵从Apache 2.0协议开源.Docker提供了一种在安全.可 ...
- JQuery html API支持解析执行Javascript脚本功能实现-代码分析
JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...
- Java基础之在窗口中绘图——利用多态性使用鼠标自由绘图(Sketcher 7 with a crosshair cursor)
控制台程序. 在Sketcher中创建形状时,并不知道应该以什么顺序创建不同类型的形状,这完全取决于使用Sketcher程序生成草图的人.因此需要绘制形状,对它们执行其他操作而不必知道图形是什么.当然 ...
- 关于Thread.getContextClassLoader的使用场景问题
Thread context class loader存在的目的主要是为了解决parent delegation机制下无法干净的解决的问题.假如有下述委派链: ClassLoader A -> ...