浏览器功能(1) - JS判定当前页面是否显示在最前面
问题起因
前段时间遇到个奇葩需求,需要窗口每次显示在浏览器最前面时,都调用接口重新获取服务器时间,以确保定时器时间的准确性(相对的准确性)。
既然有需求,那么就要想办法去实现。
1、使用 visibilitychange 事件
浏览器标签页在 被隐藏或显示 时都会触发 visibilitychange 事件。这里的隐藏包括:1、浏览器最小化(包括手动最小化浏览器;清屏操作);2、当前标签页被其他内容遮挡(要全部遮挡,部分遮挡不算);3、浏览器切换标签页
既然标签页在 被隐藏或显示 时都会触发visibilitychange事件,那么我们就监听 visibilitychange事件即可。
// 通过visibilitychange事件监听 visibilityState状态值的变化 document.addEventListener('visibilitychange', function() { console.log(document.visibilityState) if (document.visibilityState == 'hidden') { console.log('隐藏') alert('隐藏页面') } else if (document.visibilityState == 'visible') { console.log('显示') alert('显示页面') } }) // 或 // 通过visibilitychange事件 直接监听 hidden值的变化,看页面是否被隐藏 document.addEventListener('visibilitychange', function() { console.log(document.hidden) if (document.hidden) { console.log('隐藏') alert('隐藏页面') } else { console.log('显示') alert('显示页面') } })
2、使用onblur 和 onfocus
通过获取、失去焦点来判断页面是否在最前面。但这种方法有功能缺陷,详见下文。
let count = 1 window.addEventListener('focus', function() { // window获得焦点 console.log('window获得焦点') console.log('window获得焦点计数:', ++count) }) window.addEventListener('blur', function() { // window失去焦点 console.log('window失去焦点') console.log('window失去焦点计数:', --count) })
1、浏览器对象(即window对象) 有 onfocus 和 onblur事件可以监听,用以判定用户是否正在当前页面活动,但触发这两个事件的前提是页面之前是focus过的。也就是说如果页面刚刚渲染完(如刷新或新加载等)且鼠标一直停留在页面内的,此时不管用户在页面上有没有操作,页面都不会正常监听这两个事件。
2、如果页面在打开状态下,在触发了 onblur 之后并无页面操作的情况下也不会正常监听这两个事件。直到用户再次操作页面触发focus后,才会在再次离开页面时触发blur。再次点击到当前页面时才会触发focus,如此反复都会触发相应的事件。
触发onblur事件的情况:
1、在chrome浏览器下,点击console面板也会触发blur事件,同样的,前提是之前是focus的状态。
2、页面最小化。
3、浏览器切换tab页面。
4、页面中的任何弹窗。
5、focus状态下切换到其他应用。
3、使用mouseover和mouseout事件监听
但是这种方法也有问题,下文叙述。
4、可以通过document.hidden属性判断当前页面是否是激活状态。
兼容性:IE10+,Firefox10+,Chrome14+,Opera12.1+,Safari7.1+
兼容性写法示例:
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('页面非激活'); }else{ console.log('页面激活') } } document.addEventListener(visibilityChangeEvent, onVisibilityChange);
5、鼠标往上移动,离开页面显示区域后,滑动到了浏览器标签栏或地址栏,还能获取到当前鼠标位置不?
答:不能,因为浏览器标签栏和地址栏不属于页面body,DOM document 对象范围,那些区域属于浏览器功能区,不在页面展示区域内,鼠标移动上去,没有了body,document对象,因此无法获取到当前鼠标位置。
posted on 2022-06-01 11:49 第七穿插连第XX名士兵 阅读(1762) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具