Page visibility 页面可见性
一直以来,判断页面是不是当前可见标签,浏览器有没有缩小都是比较麻烦的。
通过页面可见性API可以获得相关信息
document.hidden 判断页面当前是不是可见的
document.visibilitystate 过得页面状态,背后的标签或者前面的标签,预览图状态(类似window的小预览图)等四种状态
visibilitychange事件,当页面状态改变时触发
if (document.hidden || document.msHidden || document.webKitHidden){
//page is hidden
} else {
//page is not hidden
}
function handleVisibilityChange(){
var output = document.getElementById(“output”),
msg;
if (document.hidden || document.msHidden || document.webkitHidden){
msg = “Page is now hidden.” + (new Date()) + “<br>”;
} else {
msg = “Page is now visible.” + (new Date()) + “<br>”;
}
output.innerHTML += msg;
}
//need to add to both
EventUtil.addHandler(document, “msvisibilitychange”, handleVisibilityChange);
EventUtil.addHandler(document, “webkitvisibilitychange”, handleVisibilityChange);
Page visibility 页面可见性的更多相关文章
- 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 ...
- Page Visibility实现焦点丢失提醒
0.前言 HTML5 Page Visibility API是一个很实用的特性.当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其它耗费内存的操作,等用户回来时.再继续这些操作. 当然,最 ...
- Page Visibility API(页面可见性)
页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面:隐藏的页面,就是我们没有看的页面. 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前 ...
- 页面可见生Page Visibility
Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...
- HTML5 Page Visibility
什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...
- 页面可见性改变事件 : visibilitychange 详解
1.Page Visibility API标准概述 查看W3C的官方文档时候看到这个属性 标准时间线是这样介绍的: Page Visibility Level 2 W3C Proposed Recom ...
- JavaScript监听页面可见性(焦点)同时改变title的三种方法
JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...
随机推荐
- MyCAT-EYE开源
MyCAT EYE MySQL数据库监控工具,实现了对MySQL节点的管理和监控,可供开发人员和DBA使用.后续版本将整合MyCAT2.0的管理和配置. 演示地址: 开发人员视图:http://120 ...
- 深入浅出数据结构C语言版(22)——排序决策树与桶式排序
在(17)中我们对排序算法进行了简单的分析,并得出了两个结论: 1.只进行相邻元素交换的排序算法时间复杂度为O(N2) 2.要想时间复杂度低于O(N2),算法必须进行远距离的元素交换 而今天,我们将对 ...
- Linux安装mysql-5.7.17
一.检查系统是否有自带安装MySQL 1.检查 [root@centos ~]# rpm -qa | grep -i mysql mysql-libs-5.1.71-1.el6.x86_64 2.卸载 ...
- Java 中静态方法 实例方法 具体方法区别与联系
在查阅JDK文档时,经常会看到某个类的方法汇总,一般会以如下的格式列出来: 这几个标签对应的方法类型分别是什么意思呢? 1. Static Method,静态方法,可以在不创建类实例的情况下,访问 ...
- js 浏览器上调试方法多样
1.alert(111) 直接打印出 111 2.debugger 写在代码要调试的地方 3.直接在控制台 source 里找到要调试的代码打断点 4.console 常用的 ...
- 第九章 MySQL中LIMIT和NOT IN案例
第九章 MySQL中LIMIT和NOT IN案例 一.案例的项目 1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生 ...
- DevOps之服务手册
唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务手册(Manual)> <IT资源目标化>1.设施和设备(I ...
- Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F12 Debug查看报错原因,提示net::ERR_BLOCKED_BY_CLIENT错误,但当我们点击图片地址 ...
- 如何快速部署 Prometheus?- 每天5分钟玩转 Docker 容器技术(85)
上一节介绍了 Prometheus 的核心,多维数据模型.本节演示如何快速搭建 Prometheus 监控系统. 环境说明 我们将通过 Prometheus 监控两台 Docker Host:192. ...
- Linux CentOS7 安装 Mysql5.7.19
第二次安装会安装失败 1.先停止mysql服务 service mysql stop 2.检查是否卸载干净 find / -name mysql 多用几个命令检查,不要删到其他组件的 ...