- 1.如何判断H5页面有没有被用户浏览?
- 2.当用户没有浏览页面我们需要做一些操作,例如背景音乐暂停,定时器清空,电影暂停等等一系列操作
- 3.我们怎么知道网页有没有被浏览呢?或者网页有没有没有进入最小化呢?
接下来给大家介绍HTML5新增的API, visibilitychange, document.hidden, document.visibilityState
1.visibilitychange事件用于监听网页发生变化(进入后台,进入前台)
- 1.浏览器支持
visibilitychange是HTML5的API所以支持持最新浏览器 Chrome, Firefox, IE10+ - 2.使用, 用addEventListener添加事件,当页面发生改变就会调用这个函数
document.addEventListener('visibilitychange', function () {
});
ps: 老版本浏览器如果失效需要添加前缀
- mozvisibilitychange 火狐
- msvisibilitychange IE
- webkitvisibilitychange 谷歌,Safari
2.document.hidden
- false-当前网页正在被用户浏览
- ture-当前网页进入后台
3.document.visibilityState
- visible 页面为浏览器当前激活,窗口不是最小化状态
- hidden 页面不是当前激活,或者窗口最小化了
- prerender 页面在重新生成,对用户不可见
4.判断网页进入前台还是后台
document.addEventListener('visibilitychange', function () {
console.log(document.hidden);
console.log("visibilityState " + document.visibilityState);
if (document.hidden) {
// 进入后台不被用户浏览
document.title = '页面进入后台';
} else if (document.hidden == false) {
// 进入前台,用户正在浏览
document.title = '页面正在浏览';
}
});
持续更新使用的干货,关注军哥给你惊喜
微博coderYJ
简书coderYJ
微信公众号coderYJ
