wordpress 回收站在哪个文件夹,建站之星模板好吗,tplink虚拟服务器做网站,harmonyos开发语言JS 监听浏览器各个标签间的切换
以前看到过一些网页#xff0c;在标签切换到其它地址时#xff0c;网页上的标题上会发生变化#xff0c;一直不知道这个是怎么做的#xff0c;最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定#xff0c;这里将介绍一下页面…JS 监听浏览器各个标签间的切换
以前看到过一些网页在标签切换到其它地址时网页上的标题上会发生变化一直不知道这个是怎么做的最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定这里将介绍一下页面可见性Page VisibilityAPI的简单应用。
简单的说当用户最小化网页或移动到另一个标签时API会发送 visibilitychange 有关该网页的可见性的事件。你可以检测到该事件并执行一些操作或行为。例如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
document的可见性属性
Page Visibility (Second Edition) 中定义了2个只读的 document 属性hidden 和 visibilityState。
其中 document.hidden 是一个布尔值简单的表示标签页显示或者隐藏。而 document.visibilityState 属性更为详细目前有四个可能的值
visible : 页面内容至少部分可见。这意味着在实际情况中该网页是一个非最小化窗口的可见标签页。
hidden : 页面内容是对用户不可见。实际上这意味着该文档是后台标签页或最小化窗口的一部分或者系统锁屏是时的状态。
prerender : 网页内容被预渲染并且用户不可见。
unloaded : 如果文档被卸载那么这个值将被返回。
一般情况下我们使用 document.hidden 就能满足通常的需求。
为了支持老版本的浏览器我们需要对 document.hidden 在做一些前缀处理
实例
video idvideoElement controls loopsource srchttps://www.runoob.com/try/demo_source/mov_bbb.mp4 typevideo/mp4source srchttps://www.runoob.com/try/demo_source/mov_bbb.ogg typevideo/ogg
/video// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange;
if (typeof document.hidden ! undefined) {hidden hidden;visibilityChange visibilitychange;
} else if (typeof document.mozHidden ! undefined) {hidden mozHidden;visibilityChange mozvisibilitychange;
} else if (typeof document.msHidden ! undefined) {hidden msHidden;visibilityChange msvisibilitychange;
} else if (typeof document.webkitHidden ! undefined) {hidden webkitHidden;visibilityChange webkitvisibilitychange;
}
// 添加监听器
document.addEventListener(visibilityChange, function () {console.log(当前页面是否被隐藏 document[hidden]);
}, false);console.log(hidden, visibilityChange)var videoElement document.getElementById(videoElement);// 如果页面是隐藏状态则暂停视频
// 如果页面是展示状态则播放视频
function handleVisibilityChange() {if (document[hidden]) {videoElement.pause();} else {videoElement.play();}
}// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener undefined || typeof document[hidden] undefined) {console.log(This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.);
} else {// 处理页面可见属性的改变document.addEventListener(visibilityChange, handleVisibilityChange, false);// 当视频暂停设置title// This shows the pausedvideoElement.addEventListener(pause, function () {document.title Paused;}, false);// 当视频播放设置titlevideoElement.addEventListener(play, function () {document.title Playing;}, false);
}
