js 判断是否在当前页面当前页面是否在前端

最新推荐文章于 2024-03-20 14:42:57 发布

转载最新推荐文章于 2024-03-20 14:42:57 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ooo0/p/8378729.html

文章标签：

#前端 #ViewUI

本文介绍了两种监测网页是否处于活动状态的方法：一是利用visibilitychange事件，根据document.visibilityState属性判断；二是结合使用onblur和onfocus事件，通过设置定时器在页面活跃时输出递增数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用visibilitychange

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.

document.addEventListener("visibilitychange", function() {
    console.log(document.visibilityState);
    if(document.visibilityState == "hidden") {
        console.log('隐藏');
    } else if (document.visibilityState == "visible") {
        console.log('显示')
    }
});

2.使用onblur 和 onfocus

通过获取失去焦点判断页面是否在最前端

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);
}