html5中页面可见性的判断（附代码）

前端开发教程 2025-03-04 0

本篇文章给大家带来的内容是关于html5里页面可见性的判断（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务

document.hidden

新出现的document.hidden属性，它显示页面是否为用户当前观看的页面，值为ture或false。

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab，而且窗口不是最小化状态)，要么是hidden (页面不是当前激活tab页面，或者窗口最小化了。)，或者prerender (页面在重新生成，对用户不可见。).

visibilitychange事件

// 各种浏览器兼容 var hidden, state, visibilityChange; 
if (typeof document.hidden !== undefined) { 
    hidden = hidden;
    visibilityChange = visibilitychange; 
    state = visibilityState; 
} else if (typeof document.mozHidden !== undefined) { 
    hidden = mozHidden; 
    visibilityChange = mozvisibilitychange;
    state = mozVisibilityState; 
} else if (typeof document.msHidden !== undefined) { 
    hidden = msHidden; 
    visibilityChange = msvisibilitychange;
    state = msVisibilityState; 
} else if (typeof document.webkitHidden !== undefined) { 
    hidden = webkitHidden; 
    visibilityChange = webkitvisibilitychange;
    state = webkitVisibilityState;
 } 
// 添加监听器，在title里显示状态变化
document.addEventListener(visibilityChange, function() { 
    document.title = document[state]; }, false);
// 初始化 
document.title = document[state];

添加监听

document.addEventListener(visibilitychange, function() {
  console.log( document.visibilityState );
});

document.addEventListener(msvisibilitychange, function() {
  console.log( document.msVisibilityState);
});

document.addEventListener(mozvisibilitychange, function() {
  console.log( document.mozVisibilityState);
});

document.addEventListener(webkitvisibilitychange, function() {
  console.log( document.webkitVisibilityState);
});

document.hidden

document.visibilityState

visibilitychange事件

相关文章