标签：触发 onblur 隐藏 事件 hidden document 监听 页面
js 怎样判断用户是否在浏览当前页面
有些时候我们需要在项目中判断用户是否在浏览当前页面，或者当前页面是否处于激活状态。然后再进行相关的操作。浏览器中可通过window对象的onblur、onfocus判断，或者document的hidden属性判断。
1、window.onblur & window.onfocus
关于是否失焦点，浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是focus过的。也就是说页面刚刚渲染完，用户在没有页面上任何操作时，页面是不会正常监听这两个事件的；或者页面在打开状态下，但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。直到，用户操作页面触发focus，之后离开页面才会触发blur，再次点击到当前页面时才会触发focus，如此反复都会触发相应的事件。
触发onblur事件的情况：
1、在chrome浏览器下，点击console面板也会触发blur事件，同样的，前提是之前是focus的状态。
2、页面最小化；
3、浏览器切换tab页面；
4、页面中的任何弹窗；
5、focus状态下切换到其他应用
触发onfocus的情况：
1、用户存在页面操作（包括页面中js脚本运行。如页面加载完无js运行，用户无操作，则不会触发 ）；
2、onblur事件触发前提下，页面最大化；
3、onblur事件触发前提下，页面 从其他tab页切换回当前页面；
2、document.hidden
hidden是document的属性，可以判断页面是否显示的是当前的页面。visibilitychange事件就是触发页面可见的事件。当然不同的浏览器内核记得要加前缀。表示页面处于非激活状态，反之，处于激活状态。
hidden属性为true的此类情况有：
1、 页面最小化
2、页面在后台运行
3、切换tab栏到其他页面
hidden属性为false的情况
1、当前页面正常显示，包括被其他应用挡住的情况。
visibilitychange事件的兼容性写法
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);
这两种判断方法最大的不同就是在页面被其他应用覆盖的情况下，onblur是会触发的，但是visibilitychange不会触发。如果只是判断页面是否是打开状态的话，visibilitychange事件是比较合适的。
标签：触发,onblur,隐藏,事件,hidden,document,监听,页面 来源： https://www.cnblogs.com/LeoXnote/p/14171499.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。