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

 

通过页面可见性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. 写了一个迷你confirm弹窗插件,有取消和确认操作处理并支持单个确认使用弹窗和锁屏禁止滚动

    由于项目想精简不想用其他第三方的ui插件,又很需要像confirm等小效果来完善交互,且使用的频率也是相当的高,于是自己造了一个,省时也省力 代码已经粘贴出来,直接复制即可看到效果,高手勿喷,可以相互 ...

  2. Go语言下载、安装、配置、使用

    Go语言 Go语言(Golang,The Go Programming Language),是谷歌2009发布的第二款开源编程语言.2009年7月份,谷歌曾发布了Simple语言,它是用来开发Andr ...

  3. Linux学习——shell编程之变量

    shell编程之变量:Linux shell编程基础中的变量. 包括Bash变量的分类和各变量的详细使用,如:用户自定义变量.环境变量.语系变量.位置参数变量和预定义变量. 1:什么是Bash变量? ...

  4. 在分布式数据库中CAP原理CAP+BASE

    本篇博文的内容均来源于网络,本人只是整理,仅供学习! 一.关系型数据库 关系型数据库遵循ACID规则 事务在英文中是transaction,和现实世界中的交易很类似,它有如下四个特性: 1.A (At ...

  5. 1289 大鱼吃小鱼 1305 Pairwise Sum and Divide 1344 走格子 1347 旋转字符串 1381 硬币游戏

    1289 大鱼吃小鱼 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右 ...

  6. JavaWeb(四)EL表达式

    前言 前面详细的说明了什么是JSP和它的一些元素,这篇给大家介绍一下的是EL表达式. 用EL表达式,能更好的使用JSP中的各种内置对象和作用域. 楼主作为大四狗马上要出去面试了,内心很紧张!!! 一. ...

  7. java关键字中文对比

    abstract 摘要|抽象assert 声称boolean 布尔break 中断byte 字节case 实例catch 捕捉char 烧焦class 类const 常量continue 持续defa ...

  8. Java历程-初学篇 Day09 冒泡排序

    冒泡排序 冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是 ...

  9. c# 反射得到实体类的字段名称和值,DataTable转List<T>

    /// <summary> /// 反射得到实体类的字段名称和值 /// var dict = GetProperties(model); /// </summary> /// ...

  10. CoreCLR源码探索(七) JIT的工作原理(入门篇)

    很多C#的初学者都会有这么一个疑问, .Net程序代码是如何被机器加载执行的? 最简单的解答是, C#会通过编译器(CodeDom, Roslyn)编译成IL代码, 然后CLR(.Net Framew ...