一直以来,判断页面是不是当前可见标签,浏览器有没有缩小都是比较麻烦的。

 

通过页面可见性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 页面可见性的更多相关文章

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

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

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

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

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

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

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

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

  5. Page Visibility API(页面可见性)

    页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面:隐藏的页面,就是我们没有看的页面. 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前 ...

  6. 页面可见生Page Visibility

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

  7. HTML5 Page Visibility

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

  8. 页面可见性改变事件 : visibilitychange 详解

    1.Page Visibility API标准概述 查看W3C的官方文档时候看到这个属性 标准时间线是这样介绍的: Page Visibility Level 2 W3C Proposed Recom ...

  9. JavaScript监听页面可见性(焦点)同时改变title的三种方法

    JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...

随机推荐

  1. MyCAT-EYE开源

    MyCAT EYE MySQL数据库监控工具,实现了对MySQL节点的管理和监控,可供开发人员和DBA使用.后续版本将整合MyCAT2.0的管理和配置. 演示地址: 开发人员视图:http://120 ...

  2. 深入浅出数据结构C语言版(22)——排序决策树与桶式排序

    在(17)中我们对排序算法进行了简单的分析,并得出了两个结论: 1.只进行相邻元素交换的排序算法时间复杂度为O(N2) 2.要想时间复杂度低于O(N2),算法必须进行远距离的元素交换 而今天,我们将对 ...

  3. Linux安装mysql-5.7.17

    一.检查系统是否有自带安装MySQL 1.检查 [root@centos ~]# rpm -qa | grep -i mysql mysql-libs-5.1.71-1.el6.x86_64 2.卸载 ...

  4. Java 中静态方法 实例方法 具体方法区别与联系

    在查阅JDK文档时,经常会看到某个类的方法汇总,一般会以如下的格式列出来: 这几个标签对应的方法类型分别是什么意思呢? 1.   Static Method,静态方法,可以在不创建类实例的情况下,访问 ...

  5. js 浏览器上调试方法多样

    1.alert(111)       直接打印出 111 2.debugger        写在代码要调试的地方 3.直接在控制台 source 里找到要调试的代码打断点 4.console 常用的 ...

  6. 第九章 MySQL中LIMIT和NOT IN案例

    第九章 MySQL中LIMIT和NOT IN案例 一.案例的项目 1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生 ...

  7. DevOps之服务手册

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务手册(Manual)> <IT资源目标化>1.设施和设备(I ...

  8. Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

    当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F12 Debug查看报错原因,提示net::ERR_BLOCKED_BY_CLIENT错误,但当我们点击图片地址 ...

  9. 如何快速部署 Prometheus?- 每天5分钟玩转 Docker 容器技术(85)

    上一节介绍了 Prometheus 的核心,多维数据模型.本节演示如何快速搭建 Prometheus 监控系统. 环境说明 我们将通过 Prometheus 监控两台 Docker Host:192. ...

  10. Linux CentOS7 安装 Mysql5.7.19

    第二次安装会安装失败 1.先停止mysql服务  service mysql stop 2.检查是否卸载干净   find / -name mysql      多用几个命令检查,不要删到其他组件的 ...