HTML5 API --- 页面可见性改变(visibilitychange)事件

原创 2013年12月06日 21:44:52

[本文属原创,如有转载,请注明出处http://blog.csdn.net/yl02520/article/]

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事件——visibilitychange 标签可见性

又看到一个很有意思的HTML5事件,visibilitychange事件在当前网页在可见和不可见之间变换的时候调用,比如用户正在刷微博,刷到一半切去看视频了,这个时候微博就能通过visibilityc...
  • u011366705
  • u011366705
  • 2015-07-11 19:59:51
  • 6690

当前网页关闭事件拦截onbeforeunload ,visibilitychange

window.onbeforeunload = function(){ if(confirm("确定关闭页面?")){ return true; } else{ return false; } } ...
  • cut001
  • cut001
  • 2017-06-02 11:16:21
  • 721

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

又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息...
  • yusirxiaer
  • yusirxiaer
  • 2017-06-20 10:19:37
  • 762

使用Page Visibility监听网页是否处于激活(可见)状态

在饿了么点外卖的时候你会发现,如果你离开此页的话他的网页title会改变: 在这里虽然显得没那么重要,但是如果当前你在播放视频,离开此页的话我们可以实现自动暂停功能,还是挺方便的。实现这个功能主要用...
  • u014291497
  • u014291497
  • 2016-12-20 22:39:52
  • 765

移动端兼容和事件

Mobile Web Favorites参与贡献移动前端开发收藏夹,欢迎使用 Issues 以及 Pull Request贡献者名单:https://github.com/hoosin/mobile-...
  • Mike_chen2stockings
  • Mike_chen2stockings
  • 2018-03-22 15:41:07
  • 162

HTML5——visibilitychange 标签可见性

今天一上午都在看一个童鞋的博客去了,然后发现搞了个这个诶,不不,我没打广告,我不认识这个同学,一言不合就上图———————发现了什么没? 图1 图2 看title啦,之前都没注意到这个,今天...
  • yCharlee
  • yCharlee
  • 2016-10-08 14:19:33
  • 751

当前窗口获得焦点js事件【visibilitychange】

当前窗口获得焦点js事件,html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点,  监听 onfocus() 和window.onblu...
  • huangzhenkun94
  • huangzhenkun94
  • 2017-06-27 10:54:14
  • 645

页面可见性改变事件 : visibilitychange

浏览器里当用户切入或切出当前标签页时,会触发visibilitychange事件(IE10以下浏览器不兼容)。这个事件能很好的解决页面在不可见的情况下,通过状态判断针对性减少网络请求、服务器压力等。d...
  • lihefei_coder
  • lihefei_coder
  • 2017-03-23 16:04:46
  • 482

Page Visibility API(页面是否可见)

有时候不知道用户是不是正在和页面交互,是困扰web开发人员的一大问题,尤其是界面用动画或者是其它一些一直占用资源的效果时。如果页面最小化或者是隐藏在其它标签页面后(即当前不是可见的),那么有些功能可以...
  • liuyan19891230
  • liuyan19891230
  • 2016-04-27 15:38:12
  • 1035

HTML5 API --- 页面可见性改变(visibilitychange)事件

visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, ...
  • yl02520
  • yl02520
  • 2013-12-06 21:44:52
  • 6131
收藏助手
不良信息举报
您举报文章:HTML5 API --- 页面可见性改变(visibilitychange)事件
举报原因:
原因补充:

(最多只允许输入30个字)