监听html窗口焦点事件

最新推荐文章于 2023-03-07 09:35:59 发布

fei0724

最新推荐文章于 2023-03-07 09:35:59 发布

阅读量312

点赞数

分类专栏： JS

原文链接：https://blog.csdn.net/xyc_csdn/article/details/70162323

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用html5的Page Visibility API来实现</title>
</head>
<body>
<div>
document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览器最小化（注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。
</div>
<div>
document.visibilityState：表示下面 4 个可能状态的值
</div>
<div>
hidden：页面在后台标签页中或者浏览器最小化
</div>
<div>
visible：页面在前台标签页中
</div>
<div>
prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
</div>
<div>
unloaded：页面正在从内存中卸载
</div>
<div>
Visibilitychange事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。
</div>
</body>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
if (document[hidden]) {
console.log("失去焦点");
} else {
console.log("得到焦点");
}
}

// 判断浏览器的支持情况
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
console.log("此演示需要一个浏览器，如谷歌浏览器或Firefox，支持页面可见性API。");
} else {
// 监听visibilityChange事件
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
</script>
</html>

参考：http://www.51xuediannao.com/html5/visibilitychange.html

fei0724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
监听html窗口焦点事件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用html5的Page Visibility API来实现</title></head><body><div> document.hidde...
复制链接

扫一扫