页面被隐藏（切到后台）与显示检测

最新推荐文章于 2023-01-18 17:57:27 发布

littlebearGreat

最新推荐文章于 2023-01-18 17:57:27 发布

阅读量5.2k

点赞数 1

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/79207215

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

有时候，我们需要知道用户把我们的页面切到后台了，或者从后台切回来了，我们知道这件事情然后做一些适当的处理（比如手机页面，切后台后js定时器停止运行等）。

网上查了一下，整理了一下加深记忆，原文链接：https://yq.aliyun.com/ziliao/20572

我们可以根据visibilitychange事件来判断页面的可见性。

此事件有兼容性，我检测了一下，IE10+可用，firefox、chrome正常运行（firefox、chrome老版本没有检测）,使用时注意。

下面是代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>检测页面是否被隐藏</title>
</head>
<body>
<script>
	// 对document.hidden做前缀处理
	function getHiddenProp(){
	    var prefixes = ['webkit','moz','ms','o'];
	    
	    // if 'hidden' is natively supported just return it
	    if ('hidden' in document) return 'hidden';
	    
	    // otherwise loop over all the known prefixes until we find one
	    for (var i = 0; i < prefixes.length; i++){
	        if ((prefixes[i] + 'Hidden') in document) 
	            return prefixes[i] + 'Hidden';
	    }
	 
	    // otherwise it's not supported
	    return null;
	};

	// 获取document.visibilityState属性
	function getVisibilityState() {
	    var prefixes = ['webkit', 'moz', 'ms', 'o'];
	    if ('visibilityState' in document) return 'visibilityState';
	    for (var i = 0; i < prefixes.length; i++) {
	        if ((prefixes[i] + 'VisibilityState') in document)
	            return prefixes[i] + 'VisibilityState';
	    }
	    // otherwise it's not supported
	    return null;
	};

	// 给document添加事件
	var visProp = getHiddenProp();
	if (visProp) {
	    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
	    document.addEventListener(evtname, function () {
	        document.title = document[getVisibilityState()]+"状态";
	        if (document[getVisibilityState()] == 'visible') {
	        	console.log('回来了');
	        }else{
	        	console.log('离开了');
	        }
	    },false);
	};
</script>
</body>
</html>

littlebearGreat

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面被隐藏（切到后台）与显示检测

有时候，我们需要知道用户把我们的页面切到后台了，或者从后台切回来了，我们知道这件事情然后做一些适当的处理（比如手机页面，切后台后js定时器停止运行等）。网上查了一下，整理了一下加深记忆，原文链接：https://yq.aliyun.com/ziliao/20572我们可以根据visibilitychange事件来判断页面的可见性。此事件有兼容性，我检测了一下，IE10+可用，firef
复制链接

扫一扫