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

 

通过页面可见性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. mongoDB学习手记2--建库、删库、插入、更新

    上一篇  讲了在windows系统下的安装和启动,本文主要讲怎么建库.删库.插入.更新 在讲之前我们说一下mongoDB的一些基本概念,我们对比关系型数据库能更直观的理解 SQL术语/概念 Mongo ...

  2. "HK"日常之用C# Process写一只小病毒

    众所周知,Process可以启动和关闭电脑上的进程,命名空间位于 System.Diagnostics,本次的教程就是利用其中的GetProcesses和Kill方法来实现的. 一.编码工作 首先我们 ...

  3. Divisors poj2992

    Divisors Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9940   Accepted: 2924 Descript ...

  4. windows下怎么解决Python双版本问题

    相信大家会在windows下会遇到Python双版本问题 当我们装了Python2和Python3时我们好只能在命令栏调出最高版本的那个低版本的难道消失了吗?今天我们就解决这个问题! 1.下载 我们在 ...

  5. P60 2.6

    import java.util.Scanner; public class Num { public static void main(String[] args) { Scanner input ...

  6. 基于SSM之Mybatis接口实现增删改查(CRUD)功能

    国庆已过,要安心的学习了. SSM框架以前做过基本的了解,相比于ssh它更为优秀. 现基于JAVA应用程序用Mybatis接口简单的实现CRUD功能: 基本结构: (PS:其实这个就是用的Mapper ...

  7. C#实现断点续传

    断点续传的原理在了解HTTP断点续传的原理之前,先来说说HTTP协议,HTTP协议是一种基于tcp的简单协议,分为请求和回复两种.请求协议是由客户机(浏览器)向服务器(WEB SERVER)提交请求时 ...

  8. 转载:C#特性-表达式树

    原文地址:http://www.cnblogs.com/tianfan/ 表达式树基础 刚接触LINQ的人往往觉得表达式树很不容易理解.通过这篇文章我希望大家看到它其实并不像想象中那么难.您只要有普通 ...

  9. 【node】使用nvm管理node版本

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你想快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来安 ...

  10. 三、Spring的面向切面

    Spring的面向切面 在应用开发中,有很多类似日志.安全和事务管理的功能.这些功能都有一个共同点,那就是很多个对象都需要这些功能.复用这些通用的功能的最简单的方法就是继承或者委托.但是当应用规模达到 ...