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