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

 

通过页面可见性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. js如何判断一个对象为空

    今天碰到一个问题如何判断一个对象为空? 总结的方法如下: 1.使用jquery自带的$.isEmptyObject()函数. var data={}; console.log($.isEmptyObj ...

  2. Java 基础语法

    一.关键字 定义:被 Java 赋予特殊含义的单词. 特点:基本上都是英文小写. 用于定义数据类型的关键字 基本数据类型 整数型(默认为 int) byte(8 位,1 字节,默认值是 0,最大存储数 ...

  3. Lowbit Sum 规律

    Lowbit Sum Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSt ...

  4. 【机器学习实战】第11章 使用 Apriori 算法进行关联分析

    第 11 章 使用 Apriori 算法进行关联分析 关联分析 关联分析是一种在大规模数据集中寻找有趣关系的任务. 这些关系可以有两种形式: 频繁项集(frequent item sets): 经常出 ...

  5. 机器学习理论提升方法AdaBoost算法第一卷

    AdaBoost算法内容来自<统计学习与方法>李航,<机器学习>周志华,以及<机器学习实战>Peter HarringTon,相互学习,不足之处请大家多多指教! 提 ...

  6. 【微信小程序】调用wx.request接口需要注意的问题

    写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...

  7. 基于java的后台截图功能的实现

    Java后台截图功能的实现 背景介绍: 在近期开发的可视化二期项目中的邮件项目中,邮件中的正文中含有图片.该图片的产生是将一些html网页转为图片格式,刚开始考虑使用第三方组件库html2image和 ...

  8. cookie存储中文

    写cookie         Cookie   chineseCookie   =   new   Cookie( "chineseCookie ",   URLEncoder. ...

  9. 提纲挈领webrtc之vad检测

    顾名思义,VAD(Voice Activity Detection)算法的作用是检测是否是人的语音,它的使用 范围极广,降噪,语音识别等领域都需要有vad检测.vad检测有很多方法,这里我们之介绍一 ...

  10. ASP.NET没有魔法——ASP.NET MVC是如何运行的?它的生命周期是什么?

    前面的文章我们使用ASP.NET MVC创建了个博客应用,那么它是如何工作的呢?我们都知道ASP.NET的程序需要部署到IIS上才能够通过浏览器来访问,那么IIS与ASP.NET MVC程序之间又是如 ...