js 怎样判断用户是否在浏览当前页面?
发布网友
发布时间：2022-04-27 01:21
共9个回答
热心网友
时间：2022-05-12 07:08
这样：
//网页当前状态判断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状态下切换到其他应用。
热心网友
时间：2022-05-12 08:26
可以通过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);
热心网友
时间：2022-05-12 10:01
你可以使用 onblur 和 onfocus 判断页面是否在最前端（获取焦点）
如果 onblur，停止向服务器请求，当 onfocus，继续请求
下面这个例子可以更好的演示我上面说的，你只是需要把输出数字换为 ajax 的工作。
打开页面，先输出几个数字，转到其它页面，等待几秒，再回去，数字应该接着上次离开时候的值继续输出。
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>
热心网友
时间：2022-05-12 11:52
如果加mouseover和mouseout事件怎么用呢？鼠标一移动就向服务get吗？
热心网友
时间：2022-05-12 14:00
2.HTML5新功能：localStorage 用storage事件监听别的页面
有时间百度下。
别忘了给分。追问不明白。需要监听服务器里面数据的变化。。。
为什么要监听本地的呢？
不过大兄弟，你这个localStorage很好用哈哈。比传统的cookie方便多了
热心网友
时间：2022-05-12 16:25
热心网友
时间：2022-05-12 19:06
如果 onblur，停止向服务器请求，当 onfocus，继续请求
下面这个例子可以更好的演示我上面说的，你只是需要把输出数字换为 ajax 的工作。
打开页面，先输出几个数字，转到其它页面，等待几秒，再回去，数字应该接着上次离开时候的值继续输出。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
热心网友
时间：2022-05-12 22:04
追答两中方法：
1. ajax 长连接 技术
2. 服务器推 技术
具体文档 网上都有介绍，自己看看就行了。
