HTML5事件—visibilitychange 页面可见性改变事件

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

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

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

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

HTML5事件—visibilitychange 页面可见性改变事件相关推荐

web前端学习笔记26-事件类型——一般事件、页面事件、表单事件
一.事件类型的分类事件分为一般事件.页面事件和表单事件二.一般事件关键字释义关键字释义 click 单击事件 dblclick 双击事件 mousemove 鼠标移动事件 mouseove ...
Page Visibility(页面可见性) API介绍、微拓展
Page Visibility(页面可见性) API介绍.微拓展这篇文章发布于 2012年11月29日,星期四,23:30,归类于 web综合. 阅读 66103 次, 今日 2 次旭哥推荐:3月 ...
Microsoft SignalR Map Controller具有页面可见性API和事件模糊功能，可映射文档管理系统（DMS）中的用户交互
介绍信息技术已成为企业中的战略因素,在业务流程中提供了强大的支持[6].当前,来自多个部门的技术人员的使用直接影响了所获得的组织成果[3].管理文档的能力已成为管理业务知识必不可少的工具[9].在这 ...
html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...
html5手机页面点击事件
Zepto.js和jquery区别在于: Zepto.js是小巧的适用于手机页面的js框架 jquery比Zepto.js相对大一点, 两者语法大致相同 zepto.js手机页面点击事件代码如下: 1 ...
JavaScript监听页面的关闭、刷新和最小化、onload事件、ctrlKey、altKey事件
visibilitychange事件是指当浏览器的某个标签页切换到后台或者从后台切换到前台时,会触发该事件.可以用来判断当前页面可见性的状态,用于判断当前页面是否是最小化状态. onload事件 on ...
给服务器端下拉asp:DropDownList 绑定改变事件，Ajax绑定下拉
给服务器端下拉asp:DropDownList 绑定改变事件,页面加载写ddl_GJ.Attributes.Add("onchange", "IsShow()" ...
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件简单的html页面: <!DOCTYPE html> <html lang="en"> ...
vue下拉框值改变事件_vue下的@change事件
楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下先上代码 Title 请选择 {{province.text}} 请选择 {{city.text}} new Vue({ el:'#a ...

HTML5事件—visibilitychange 页面可见性改变事件

HTML5事件—visibilitychange 页面可见性改变事件相关推荐

最新文章

热门文章