js 怎样判断用户是不是在浏览当前页面？

Posted 2023-05-10

参考技术A

这样：

//网页当前状态判断var hidden, state, visibilityChange; if (typeof document.hidden !== 

"undefined")

hidden = "hidden";

visibilityChange = "visibilitychange";

state = "visibilityState"; else if (typeof document.mozHidden !== "undefined")

hidden = "mozHidden";

visibilityChange = "mozvisibilitychange";

state = "mozVisibilityState"; else if (typeof document.msHidden !== "undefined")

hidden = "msHidden";

visibilityChange = "msvisibilitychange";

state = "msVisibilityState"; else if (typeof document.webkitHidden !== "undefined")

hidden = "webkitHidden";

visibilityChange = "webkitvisibilitychange";

state = "webkitVisibilityState";// 添加监听器，在title里显示状态变化

document.addEventListener(visibilityChange, function()

document.title = document[state];, false);//初始化页面状态document.title = 

document[state];

扩展资料：

注意事项

浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是focus过的。也就是说页面刚刚渲染完，用户在没有页面上任何操作时，页面是不会正常监听这两个事件的；或者页面在打开状态下，但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。

直到，用户操作页面触发focus，之后离开页面才会触发blur，再次点击到当前页面时才会触发focus，如此反复都会触发相应的事件。

触发onblur事件的情况：

1、在chrome浏览器下，点击console面板也会触发blur事件，同样的，前提是之前是focus的状态。

2、页面最小化。

3、浏览器切换tab页面。

4、页面中的任何弹窗。

5、focus状态下切换到其他应用。

js判断当前浏览设备

　　前端开发经常遇到需要判断用户的浏览设备，是pc端还是移动端，移动端使用的是什么手机系统？android、ios、ipad、windows phone等等，有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开，等等一系列判断做一些相应的处理。

　　1、首先判断pc端还是移动端。

 1     function IsPC() {
 2         var userAgentInfo = navigator.userAgent;
 3         var Agents = ["Android", "iPhone",
 4                     "SymbianOS", "Windows Phone",
 5                     "iPad", "iPod"];
 6         var flag = true;
 7         for (var v = 0; v < Agents.length; v++) {
 8             if (userAgentInfo.indexOf(Agents[v]) > 0) {
 9                 flag = false;
10                 break;
11             }
12         }
13         return flag;
14     }

　　

　　2、判断用户移动端使用的系统平台

1     var u = navigator.userAgent;
2     if (u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1) {
3         //安卓手机
4     } else if (u.indexOf(‘iPhone‘) > -1) {
5         //苹果手机
6     } else if (u.indexOf(‘Windows Phone‘) > -1) {
7         //winphone手机
8     }

 

　　3、判断用户是否在微信中打开

1     function isWeiXin(){ 
2         var ua = navigator.userAgent.toLowerCase(); 
3         if(ua.indexOf(‘micromessenger‘) != -1) { 
4             return true; 
5         } else { 
6             return false; 
7         } 
8     }