转:https://blog.csdn.net/yusirxiaer/article/details/73480916

又看到一个很有意思的HTML5事件

visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等。虽然这只是一个简单的功能,但是能够广大的采用HTML5开发游戏的开发者提供方便,比如用户正在玩游戏时,突然切换到后台去发一条短信或打一个电话,再切换到游戏,那么开发者就需要捕捉对这些突发情形进行处理,当游戏切换到后台时就暂停游戏,从后台切换回来时,又能允许用户继续游戏。

通过document的hidden属性可以判断标签是否可见。true时代表标签不可见。 
这个事件适合在标签不可见的时候减少网络请求、服务器压力等,也可以做一些好玩的事情,比如改变网页标题的文字。

 document.addEventListener("visibilitychange", function(){
document.title = document.hidden ? "用户离开了" : "用户回来了";
});

HTML5事件—visibilitychange 页面可见性改变事件的更多相关文章

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

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

  2. JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  3. 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件

    [摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...

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

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

  5. jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表 ...

  6. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

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

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

  8. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  9. 页面可见性判断:document.hidden与visibilitychange事件

    我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document. ...

随机推荐

  1. 【更新】搭建 Zookeeper-3.4.11 集群

    先准备好三台linux(虚拟机). 1. 先把Java环境配好.我CentOS-7-x86_64-DVD-1708 + jdk1.8.0_161 1.1 先把jdk上传到系统里面(我利用的Filezi ...

  2. idea tomcat上传图片,无法显示的问题解决

    真是浪费时间啊,之前eclipse下的tomcat 去webapps下找就行了,这倒好,idea下根本没有. 我上传的目录建在项目中的static中了,upload文件夹,上传到这里肯定是找不到了的: ...

  3. kali linux 启动无法自动连接网络问题i

    kali 有一个很大的问题:无法自动连接网咯. 而且,按照网上的方法修改/etc/Network-manager/Network*.conf和/etc/network/interfaces也没有效果. ...

  4. Python基础【day02】:数据运算(二)

    本节内容 数据运算 表达式while 循环 一.数据运算 算数运算: 比较运算: 赋值运算: 逻辑运算: 成员运算: 身份运算: 位运算: #!/usr/bin/python a = 60 # 60 ...

  5. 设计模式---对象创建模式之抽象工厂模式(Abstract Factory)

    一:概念 抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 二:动机 在软件系统 ...

  6. centos7环境下开启指定端口

    参考原博:https://www.cnblogs.com/eaglezb/p/6073739.html 查看已经开放的端口: firewall-cmd --list-ports 开启端口 firewa ...

  7. 在 chrome 上导出 pdf

    用html+css写出网页,然后在chrome上导出pdf 1. command + p:快捷呼出打印: 2. “目标打印机”:选择“更改”,之后选择“另存为PDF”: 3. 点“更多设置”,可以勾选 ...

  8. CM记录-升级Spark版本到2.x(转载)

    ①csd包:http://archive.cloudera.com/spark2/csd/    下载SPARK2_ON_YARN-2.2.0.cloudera1.jar ②parcel包:http: ...

  9. jquery ajax 跨域请求【原】

    前台 function sending(){ $.ajax({ type : "get",//jsonp只能get async:true, url : "/webcont ...

  10. [iOS]App上架流程[利用Archive进行上传]

    今天给大家带来项目如何上架的教程 准备: 1. 一个开发者账号(需要交过钱的,