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

Posted 2023-05-10

比如说我用浏览器打开了好多页面，怎样判断我这个页面是否正在被用户浏览。
我想实现的功能是
那个页面不断的像服务器get数据回来监测是否有更新。
但是如果用户不在浏览这么页面的话，那个页面还是会不断的给服务器get数据，这样子用户多了肯定会造成服务器压力。
还有什么好办法没？

这样：

//网页当前状态判断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状态下切换到其他应用。

参考技术A

可以通过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);

参考技术B

你可以使用 onblur 和 onfocus 判断页面是否在最前端（获取焦点）

如果 onblur，停止向服务器请求，当 onfocus，继续请求

下面这个例子可以更好的演示我上面说的，你只是需要把输出数字换为 ajax 的工作。

打开页面，先输出几个数字，转到其它页面，等待几秒，再回去，数字应该接着上次离开时候的值继续输出。

<script type="text/javascript">
var count = 1;
var interval_output = null;

function output_number()
document.body.innerhtml += (count + " ");
count++;


// window 失去焦点，停止输出
window.onblur = function()
clearInterval(interval_output);
;

// window 每次获得焦点
window.onfocus = function()
// 每 1 秒在页面输出一个数
interval_output = setInterval(function()
output_number();
, 1000);

</script>

参考技术C 可以给整个页面添加mouseover和mouseout事件，如果用户正在浏览该页面，基本上鼠标是在这个页面上的。这里，当over事件一时触发可以判断用户正在浏览页面，当out触发，则认为用户不关注页面了。追问

先判断鼠标的位置。。如果能找到鼠标就向服务器get你看能不能行的通？
如果加mouseover和mouseout事件怎么用呢？鼠标一移动就向服务get吗？

参考技术D 1.监听cookis
2.HTML5新功能：localStorage 用storage事件监听别的页面

有时间百度下。
别忘了给分。追问

不明白。需要监听服务器里面数据的变化。。。
为什么要监听本地的呢？
不过大兄弟，你这个localStorage很好用哈哈。比传统的cookie方便多了

如何判断当前页面是不是在微信浏览器中打开

方法一：使用JS判断。
functionis_weixn()
varua=navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger")
returntrue;
else
returnfalse;


方法二：使用PHP判断。
functionis_weixin()
if(strpos($_SERVER['HTTP_USER_AGENT'],'MicroMessenger')!==false) //strpos()函数查找字符串在另一字符串中第一次出现的位置。
returntrue;

returnfalse;
参考技术A

1、首先解锁手机，在手机桌面上找到微信打开。

2、然后找到对话框打开，打开别人给自己发的链接。

3、如图打开百度的链接，用微信浏览器进入网页以后，点击右上方如图符号。

4、进入选择页面，点击“在浏览器”打开。

5、如图会出现手机已安装的本地APP浏览器，选择一个自己想用的本地浏览器点击下方“仅一次”或“总是”都可以打开打开本地APP浏览器。

6、此时，就已经在微信浏览器中将本地APP浏览器打开了。

参考技术B 任何浏览器的判断都是获取user-agent参数进行判断的，判断当前页面是否在微信浏览器中打开同样也不例外。
1、首先需要获取微信内置浏览器的User Agent，经过对微信的浏览器的检测，它的 User Agent 是：
Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1
2、通过识别 MicroMessenger 这个关键字来确定是否微信内置的浏览器了。
最常用的方法是通过JS去判断，所以分享下JS判断微信内核的办法，代码如下：
function is_weixin()
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger")
return true;
else
return false;

通过以上的方法就可以很方便的浏览者用的是不是微信内核的浏览器，同样做数据分析的时候也可以把浏览器按不同的类型来做统计，以便更精准的做数据分析。 参考技术C 本文实例讲述了JS判断当前页面是否在微信浏览器打开的方法。分享给大家供大家参考，具体如下：

最近做很多HTML5的项目，很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中，点击下载链接无法下载应用。那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面。通过js就可以判断当前页面是在什么浏览器打开的。

以下是一段示例代码，注释中表明了通过JS如何判断是否在微信浏览器打开，是否在QQ空间浏览器，是否在新浪微博打开。当然可以做得更完善一点，再加上判断是在移动设备打开还是在PC端浏览器打开的，更加细分一点，可以判断是在安卓系统的浏览器打开的还是IOS系统浏览器打开的。
if (browser.versions.mobile) //判断是否是移动设备打开。browser代码在下面 var ua = navigator.userAgent.toLowerCase();//获取判断用的对象 if (ua.match(/MicroMessenger/i) == "micromessenger") //在微信中打开 if (ua.match(/WeiBo/i) == "weibo") //在新浪微博客户端打开 if (ua.match(/QQ/i) == "qq") //在QQ空间打开 if (browser.versions.ios) //是否在IOS浏览器打开 if(browser.versions.android) //是否在安卓浏览器打开 else //否则就是PC浏览器打开
再附上browser的代码，通过以下方法可以判断很多浏览器。包括判断IE浏览器，Opera浏览器，苹果浏览器，谷歌浏览器，火狐浏览器等。
var browser = versions: function () var u = navigator.userAgent, app = navigator.appVersion; return //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 ; (), language: (navigator.browserLanguage || navigator.language).toLowerCase()
希望本文所述对大家JavaScript程序设计有所帮助。 参考技术D

如何判断当前页面是否在微信浏览器中打开

简单javascript识别移动端浏览器，js判断是否在微信浏览器中打开，js判断页面是否为手机qq打开

javascript 判断页面是否为微信或手机qq浏览器访问

- 返回值
- weixin 微信
- qq 手机QQ
- mobile 手机浏览器

亲测可用！