转自:http://www.webhek.com/page-visibility

长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了?他们切换回来了么?现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。

document.hidden

这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。).

visibilitychange事件

监听页面可见性变化非常容易:

// 各种浏览器兼容
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
} // 添加监听器,在title里显示状态变化
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, false); // 初始化
document.title = document[state];

上面的代码会在页面可见性发生变化时修改document.title的值!

使用HTML5里页面可见性接口判断用户是否正在观看你的页面的更多相关文章

  1. 利用HTML5判断用户是否正在浏览页面技巧

    现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...

  2. html5判断用户摇晃了手机(转)

    先来看下html5的这几个特性: 1.deviceOrientation:方向传感器数据的事件,通过监听该事件可以获取手机静态状态下的方向数据: 2.deviceMotion: 运动传感器数据事件,通 ...

  3. php 用户访问菜单页面,必须登录,判断用户是否登录

    <pre name="code" class="python"># 本节课大纲: 一.空模块和空操作 1.空操作 function _empty($ ...

  4. yii中的restful方式输出并调用接口和判断用户是否登录状态

    //创建一个控制器接口 返回的是restful方式 <?php namespace frontend\controllers; use frontend\models\Fenlei; use f ...

  5. Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在

    Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...

  6. 使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  7. js判断用户是否离开当前页面

    简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...

  8. js判断用户关闭页面或浏览器

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  9. js 怎样判断用户是否在浏览当前页面

    有些时候我们需要在项目中判断用户是否在浏览当前页面,或者当前页面是否处于激活状态.然后再进行相关的操作.浏览器中可通过window对象的onblur.onfocus判断,或者document的hidd ...

随机推荐

  1. 步步入佳境---UI入门(1)--项目建立与实现

    一,本文讲解建立一个空项目,怎么一步一步的创建程序,总体的感觉一下程序流程  1,首先建立一个项目,如下:single view project,我们首先删除CHAppDelegate文件和Main. ...

  2. virtualenv 设置虚拟环境来运行不同版本的python

    转自: http://pythonguidecn.readthedocs.io/zh/latest/dev/virtualenvs.html virtualenv 是一个创建隔绝的Python环境的 ...

  3. Codeforces Round #462 (Div. 2) B-A Prosperous Lot

    B. A Prosperous Lot time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. hdu1281 棋盘游戏 二分图最大匹配

    小希和Gardon在玩一个游戏:对一个N*M的棋盘,在格子里放尽量多的一些国际象棋里面的“车”,并且使得他们不能互相攻击,这当然很简单,但是Gardon限制了只有某些格子才可以放,小希还是很轻松的解决 ...

  5. python list 的查找, 搜索, 定位, 统计

    Python中是有查找功能的,四种方式:in.not in.count.index,前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hello'],为 ...

  6. ES6必知必会 (二)—— 字符串和函数的拓展

    字符串的拓展 1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串 2.字符串新增的 includes().startsWith().endsWidth() 三个方法用于判断 ...

  7. V4L2控制驱动

    1.应用如何知道设备支持那些特性的控制?一种典型的做法,V4L2 API提供了一种机制可以让应用能枚举可用的控制操作.为此,他们要发出最终由驱动videoc_queryctrl()方法实现的ioctl ...

  8. ImportTsv-HBase数据导入工具

    一.概述 HBase官方提供了基于Mapreduce的批量数据导入工具:Bulk load和ImportTsv.关于Bulk load大家可以看下我另一篇博文. 通常HBase用户会使用HBase A ...

  9. leetcode:Minimum Depth of Binary Tree【Python版】

    1.类中递归调用添加self: 2.root为None,返回0 3.root不为None,root左右孩子为None,返回1 4.返回l和r最小深度,l和r初始为极大值: # Definition f ...

  10. dup and dup2的剖析

    转:http://www.cnblogs.com/sdphome/archive/2011/04/30/2033381.html dup和dup2都可用来复制一个现存的文件描写叙述符,使两个文件描写叙 ...