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


可以通过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);
你可以使用 onblur 和 onfocus 判断页面是否在最前端(获取焦点)
如果 onblur,停止向服务器请求,当 onfocus,继续请求

下面这个例子可以更好的演示我上面说的,你只是需要把输出数字换为 ajax 的工作。
打开页面,先输出几个数字,转到其它页面,等待几秒,再回去,数字应该接着上次离开时候的值继续输出。
1
2
3
...
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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM