JS中的PageVisibility API

最新推荐文章于 2024-01-30 20:46:30 发布

kangng

最新推荐文章于 2024-01-30 20:46:30 发布

阅读量417

点赞数

本文链接：https://blog.csdn.net/kangng/article/details/79200185

版权

本文介绍了PageVisibilityAPI的三个主要组成部分：document.hidden、document.visibilityState及visibilitychange事件，并提供了跨浏览器兼容性的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Page Visibility API : 判断页面可见性

由三部分组成：

1. document.hidden (返回布尔值) : 页面是否隐藏，切页，最小化

2. document.visibilityState (返回字符串) : 返回四个可能的状态值

"visible" ：页面可见
"hidden" : 切页或浏览器最小化
"prerender" : 页面正在渲染
"unloaded" : 页面从内存中卸载清除

3.visibilitychange事件：切换页面，隐藏浏览器的时候触发

4.浏览器兼容： hidden属性和visibilitychange事件需要在前面加上浏览器前缀

IE	Chrome	FireFox	Opera
”ms“	"webkit"	"moz"	"o"

目前为止主流浏览器的最新版本已经不需要加上前缀。

5.跨浏览器代码

function isHiddenSupported(){//检测浏览器是否支持该API
    return ("hidden" in document || "msHidden" in document || "webKitHidden" in document);
}

//页面是否隐藏
function isPageHidden(){
    return(document.hidden || document.msHidden || document.webKitHidden);
}

//visibilitychange事件
function visibilitychangeEvent(handler){
	var versionProp = getPrefixName();	
	document.addEventListener(versionProp,handler,false);
}

function getPrefixName(){
	if ("hidden" in document) {
		//重写函数，避免每次调用都做一遍浏览器检测
		getPrefixName = function(){
			return "visibilitychange";
		}
	}
	else if("msHidden" in document) {
		getPrefixName = function(){
			return "msvisibilitychange";
		}
	}
	else if("webKitHidden" in document) {
		getPrefixName = function(){
			return "webkitvisibilitychange";
		}
	}
	else if("oHidden" in document){
		getPrefixName = function(){
			return "ovisibilitychange";
		}
	}
	else{
		throw new Error("PageVisibility was unsupport");
	}
	
	return getPrefixName();
}