[摘要：[本文属本创，若有转载，请说明出处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. mac os x在PC上安装

    系统安装之前的准备工作及安装过程简介 前面我们已经提到,苹果电脑虽然已经采用了x86架构的Intel处理器,但其官方并不提供在非苹果电脑上安装Mac OS的支持.所以,要想在普通PC/笔记本电脑上安装 ...

  2. fetch使用的常见问题及解决办法

    首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考MDN fetch教程. 引言 说道fetch就不得不提XMLHttpRequest了,XHR在发送web请求时需要开发者配置相关请求 ...

  3. EFcore与动态模型

    在开发商城系统的时候,大家会遇到这样的需求,商城系统里支持多种商品类型,比如衣服,手机,首饰等,每一种产品类型都有自己独有的参数信息,比如衣服有颜色,首饰有材质等,大家可以上淘宝看一下就明白了.现在的 ...

  4. 2017 CVTE春招内推专场 C/C++软件开发岗笔试编程题

    先来一波吐槽:选择题全是不定项选择,考的内容在我看来,"反正我接受唔到咯". 比如: 1.Windows操作系统某个通信机制(具体题目忘了,反正答案我选了个熟悉的名词"消 ...

  5. js或者php浮点数运算产生多位小数的理解

    <?php $f = 0.58; var_dump(intval($f * 100)); //为啥输出57 ?> 首先我们要知道浮点数的表示(IEEE 754): 浮点数, 以64位的长度 ...

  6. SuperWebClient -一个基于CURL的.NET HTTP/HTTPS模拟神组件（2）

    今天我们讨论SuperWebClient组件使用中的几个简单主题 1: UserAgent2: Cookies3: POST登录 1:UserAgent这个是客户端标识信息,此信息是用于鉴别正在访问W ...

  7. 在IIS中部署Asp.net Mvc

    概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...

  8. angular : ng-options

    基本调用,得到name 属性 <select ng-model="target" ng-options="obj.name as obj.name for obj ...

  9. [bzoj1500][NOI2005]维修数列——splay

    题目 题解 这道题可以说是数列问题的大BOSS,也算是这一周来学习splay等数据结构的一个总结. 我们一个一个地看这些操作. 对于操作1,我们首先建一棵子树,直接接上原树即可. 对于操作2,我们找到 ...

  10. github学习（一）

    初识github篇. 一.什么是github:       GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub.       g ...