有些时候我们需要在项目中判断用户是否在浏览当前页面,或者当前页面是否处于激活状态。然后再进行相关的操作。浏览器中可通过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事件是比较合适的。

js 怎样判断用户是否在浏览当前页面的更多相关文章

  1. [JS] js 判断用户是否在浏览当前页面

    var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...

  2. 利用HTML5判断用户是否正在浏览页面技巧

    现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...

  3. js如何判断用户是在pc端和还是移动端访问

    js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...

  4. js如何判断用户使用的设备类型及平台

    前端开发经常遇到需要判断用户的浏览设备,是pc端还是移动端,移动端使用的是什么手机系统?android.ios.ipad.windows phone等等,有时候还需要知道用户浏览页面是在微信中打开还是 ...

  5. JS window对象 返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL。

    返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...

  6. js 各类判断用户输入字符的格式函数

    1.JS 判断IP格式是否正确: function checkIP(ip) { var regular = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;//正则表达式 if (reg ...

  7. js监听用户思否在当前页面

    (function () { var t var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in docume ...

  8. js判断用户是在PC端或移动端访问

    js如何判断用户是在PC端和还是移动端访问.  最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...

  9. 使用HTML5里页面可见性接口判断用户是否正在观看你的页面

    转自:http://www.webhek.com/page-visibility 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么?现在,HT ...

随机推荐

  1. Java并发指南10:Java 读写锁 ReentrantReadWriteLock 源码分析

    Java 读写锁 ReentrantReadWriteLock 源码分析 转自:https://www.javadoop.com/post/reentrant-read-write-lock#toc5 ...

  2. 20182332 实验四《Java Socket编程 》实验报告

    20182332 实验肆<数据结构与面向对象程序设计>实验报告 课程:<程序设计与数据结构> 班级: 1823 姓名: 盛国榕 学号:20182332 实验教师:王志强 实验日 ...

  3. ph:做参考

    1  波动学 <伯克利物理学教程>第三卷  上.下册2  场论(朗道)3  场论与粒子物理学(上册)(李政道)出国留学必备书之一!4  场论与粒子物理学(下册)(李政道)5  非平衡态热力 ...

  4. Flutter设置Container的最大最小宽高

    Flutter中设置Container宽高可直接通过width和height属性来设置:如下 Container( width: 100, height: 100, color: Colors.red ...

  5. git仓库与项目源码分离

    在服务器上初始化git仓库 cd mkdir gitrepo cd gitrepo git init --bare runoob.git 本地 若是已经有git项目了,直接添加一个仓库地址就行了 gi ...

  6. oracle-游标-存储过程-函数-包

    一.存储过程 不可以在insert,update,delete中直接使用,可以有return但代表的是退出过程 过程有三种类型:不返回值,可以返回多个值,参数有三种类型,分别如下: in:只输入,不返 ...

  7. 21 Flutter仿京东商城项目 商品详情 请求接口渲染数据 商品属性数据渲染

    加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展.   cupertino_icons: ^0.1.2   flutter ...

  8. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_04-新增页面-服务端-接口开发

    api接口定义方法 api的微服务里面.CmsPageControllerApi内定义add方法,返回类型是CmsPageResult CmsPageResult继承了ResponseResult R ...

  9. html+大文件上传

    前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践. ...

  10. idea-配置文件提示红色

    Idea建立spring配置文件首行红色 提示URI is not registered 复制出现红色字体的路径...File -  Settings  - schemas and DtDs 点击加号 ...