JS - visibilitychange - 网页标题的切换

浏览器标签页被隐藏或显示的时候会触发 visibilitychange 事件。

js 代码

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
$('[rel="shortcut icon"]').attr('href', "http://omuy6viz3.bkt.clouddn.com/2017/03/2350176515.ico");
document.title = '(⊙_⊙)已隐藏•' + OriginTitile;
clearTimeout(titleTime);
}
else {
$('[rel="shortcut icon"]').attr('href', "http://omuy6viz3.bkt.clouddn.com/2017/03/2350176515.ico");
document.title = '๑乛◡乛๑回来喽•' + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 1500);
}
});
参考

浏览器标签页切换时停止播放音乐

<html>
<body onload="load()">
<audio id="audio_id">
<source src="http://omuy6viz3.bkt.clouddn.com/2017/03/1357898667.mp3"/>
</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>
参考
返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论