转: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. C# WinForm文章收集

    DataGridView 使用方法集锦 https://blog.csdn.net/zhaoyu_m69/article/details/70307934 关于DataGridView的一些操作(很全 ...

  2. Qt Designer 的使用

    1. Qt Designer 快速入门 Qt Designer 是交互式可视化GUI设计工具,可以帮助我们快速开发 PyQt 程序的速度. 它生成的 UI 界面是一个后缀为 .ui 的文件,可以通过 ...

  3. passat / maintenance / baoyang

    s s 南京迎客隆汽车租赁有限公司 / 地址:常府街54号 / 电话:025-84546836 84507610 二手车养不起.修不起?果真如此吗?http://www.che168.com/list ...

  4. 调用Bartender服务并打印bartender标签

    通常大部分企业在生产,仓储,QC等运作环节会用到标签,标签上有些各种标识. 一般的企业都有配有标签软件+专用的标签打印机.此例以bartender为例子. 如果为了实现打印条码,或者显示具体的功能,用 ...

  5. 虚拟机centos7系统下安装hadoop ha和yarn ha(详细)

    一:基础环境准备 (一):虚拟机新建五个centos7系统(复制文件夹的方式) (二):角色分配 (三)按照角色分配表配置 (1)更改主机ip(自行查找),如果只是个人搭建玩一玩,可选择安装cento ...

  6. 完整版ffmpeg使用情况

    protected void Page_Load(object sender, EventArgs e) { string filePath = @"D:/Prjects/MT147/exa ...

  7. sql 行变列

    select * from market//查看原来所有数据 //第一种方式 select max(case area when '南京' then num else 0 end) 南京, max(c ...

  8. 堆叠窗口QStackedWidget

    经常将QStackedWidget和QListWidget或者QListView搭配使用 import sys from PyQt5.QtWidgets import QApplication, QW ...

  9. Python3之网络爬虫<0>初级

    由于Python3合并URLib与URLlib2统一为URLlib,Python3将urlopen方法放在了urllib.request对象下. 官方文档:https://docs.python.or ...

  10. Kafka0.10.0安装配置

    1 解压文件 tar -zvxf kafka_2.11-0.10.0.0.tgz 2 修改配置server.properties vim server.properties broker.id=1 z ...