[摘要：[本文属本创，若有转载，请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情，当扫瞄器的某个标签页切换到背景，或从背景切换到前台时便会触收该]

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

下面是一个简单的实例代码，当应用程序或浏览器标签页切换到后台时就停止播放音乐，从后台切换回来时又开始播放音乐。

<html>
<body onload="load()">
<audio id="audio_id">
<source src="demo-audio.mp3"/>
<source src="demo-audio.ogg"/>
Browser can't support Audio tag.
</audio>
<script>
var audioElement = document.getElementById("audio_id");
function onVisibilityChanged(event) {
  var hidden = event.target.webkitHidden;
  if (hidden)
    audioElement.pause();
  else
    audioElement.play();
}
function load() {
  audioElement.play();
  audioElement.loop = true;
  document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
}
</script>
</body>
</html>

注意：现在某些浏览器还保留了visibilitychange的前缀，例如Chrome浏览器还保留着webkit前缀，不过该事件已经趋于稳定，在Chrome 33及以后就去掉了前缀，直接使用visibilitychange，这里只是一个简单的实例程序，大家可以针对这个程序做简单修改，兼容更多的浏览器。

【转】HTML5 API --- 页面可见性改变(visibilitychange)事件的更多相关文章

  1. 使用HTML5里页面可见性接口判断用户是否正在观看你的页面

    转自:http://www.webhek.com/page-visibility 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么?现在,HT ...

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

    转:https://blog.csdn.net/yusirxiaer/article/details/73480916 又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器 ...

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

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

  4. Page Visibility API(页面可见性)

    页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面:隐藏的页面,就是我们没有看的页面. 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前 ...

  5. HTML5 API 是什么

    HTML5 API 是什么 一.总结 1.html5有很多好的api可以用:例如绘图的canvas,获取地理位置的,获取手机电池信息的等等,后面用的时候可以百度 2.html5 API是什么:html ...

  6. html5 API

    1.Canvas绘图 2.postMessage跨域.多窗口传输 3.requestAnimationFrame动画 4.PageVisibility API页面可见性 5.File 本地文件操作 6 ...

  7. 页面可见性判断：document.hidden与visibilitychange事件

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

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

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

  9. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

随机推荐

  1. 一期结业KTV项目难点

    查询完成后给歌曲便利到一个数组当中将选中的歌曲对象加入到playlist类中的数组songs. 创建类名称: class Playlist       {   //定义一个长度为50的数组       ...

  2. 2017-2-24 C#基础 for循环的嵌套

    用几个练习题演示一下for循环的嵌套 1.打印以下图形 ★★★★★★★★★★★★★★★ namespace _2017_2_24_for循环的嵌套 { class Program { static v ...

  3. 基于Hadoop的改进Apriori算法

    一.Apriori算法性质 性质一: 候选的k元组集合Ck中,任意k-1个项组成的集合都来自于Lk. 性质二: 若k维数据项目集X={i1,i2,-,ik}中至少存在一个j∈X,使得|L(k-1)(j ...

  4. 对spring，struts，hibernate及MVC的理解

    对于spring,hibernate,struts等框架,刚开始的时候总是会很迷茫,不知道他们是用来做什么的. 1.对框架的作用理解 个人认为框架的作用是把代码进行了分类,减少了代码的耦合性. 如果不 ...

  5. 徒手用Java来写个Web服务器和框架吧<第三章:Service的实现和注册>

    徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response> 这一章先把Web框架的功能说 ...

  6. [POJ1088] 滑雪(递归dp)

    Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  7. Java面试14|Session与Cookie

    1.在分布式环境,管理Session通常使用下面三种方式: (1)Session Replication 方式管理 (即session复制) 将一台机器上的Session数据广播复制到集群中其余机器上 ...

  8. html 框架 2017-03-11

    1. 框架frameset   (不在body中编写) Eg: 显示如下框架 第一步: <frameset rows="100,100,*" frmameborder=&qu ...

  9. kali linux /etc/apt/source.list

    this list is very important , you can not download what you want like fictx , flash-plugin , vm-tool ...

  10. LBPL--基于Asp.net、 quartz.net 快速开发定时服务的插件化项目

    LBPL 这一个基于Asp.net. quartz.net 快速开发定时服务的插件化项目 由于在实际项目开发中需要做定时服务的操作,大体上可以理解为:需要动态化监控定时任务的调度系统. 为了实现快速开 ...