如何使用 Javascript 在 Chrome 中检测选项卡何时聚焦或不聚焦？

Posted 2023-02-19

【中文标题】如何使用 Javascript 在 Chrome 中检测选项卡何时聚焦或不聚焦？

【英文标题】：How to detect when a tab is focused or not in Chrome with Javascript?

【发布时间】：2011-02-12 19:42:44

【问题描述】：

我需要知道用户当前是否在 Google Chrome 中查看标签。我尝试使用事件模糊和焦点绑定到窗口，但似乎只有模糊工作正常。

window.addEventListener('focus', function() 
  document.title = 'focused';
);

window.addEventListener('blur', function() 
  document.title = 'not focused';
);

焦点事件的工作方式很奇怪，只是有时。如果我切换到另一个选项卡并返回，焦点事件将不会激活。但是如果我点击地址栏然后返回页面，它会的。或者，如果我切换到另一个程序，然后返回 Chrome，如果标签当前处于焦点状态，它将激活。

【问题讨论】：

您是否尝试将这些事件附加到 docment 而不是 window？

我不确定它是否会影响事件检测，但 window.focus 操作在 Chrome 中被禁用（或至少有问题）。请参阅here 和here 了解更多信息。

也不适用于文档，这是针对焦点事件，而不是焦点操作。我想我会改变我的方法并将事件更改为鼠标悬停或窗口滚动。对于这种情况是合适的。

截至 2011 年，您在问题中的代码在 Chrome 中完美运行。该解决方案不起作用。

Is there a way to detect if a browser window is not currently active? 的可能副本

【参考方案1】：

对于想要在模糊上交换页面标题然后返回焦点的原始页面标题的任何人：

// Swapping page titles on blur
var originalPageTitle = document.title;

window.addEventListener('blur', function()
    document.title = 'Don\'t forget to read this...';
);

window.addEventListener('focus', function()
    document.title = originalPageTitle;
);

【参考方案2】：

2015 年更新： 具有可见性 API 的新 html5 方式（取自 Blowsie 的评论）：

document.addEventListener('visibilitychange', function()
    document.title = document.hidden; // change tab text for demo
)

---

截至 2011 年，原始海报提供的代码（在问题中）现在可以使用：

window.addEventListener('focus', function() 
    document.title = 'focused';
);

window.addEventListener('blur', function() 
    document.title = 'not focused';
);

编辑：几个月后的 Chrome 14 中，这仍然有效，但用户必须通过点击窗口中的任意位置至少一次与页面进行交互。仅仅滚动等不足以完成这项工作。执行window.focus() 也不会自动完成这项工作。如果有人知道解决方法，请提及。

【讨论】：

在无需用户先点击某处的情况下使其工作的方法是将“window.focus()”添加到 window.onload 事件中。这样做的副作用是，如果窗口是链接的目标并且已经在当前窗口后面打开，它将被带到前面。请注意，此解决方案仅检测焦点丢失，而不是由切换选项卡引起的。例如，如果失去焦点是由于用户在 iframe 内单击造成的，则您必须消除这种情况：

函数 iframeMouse(over) oif = over; window.addEventListener('blur', function() document.title = oif ? "iframe focus" : "not focus"; );

有关更深入的可靠答案，请参阅此。 forums.greensock.com/topic/…

使用document.visibilityState 获取当前可见性状态

【参考方案3】：

Is there a way to detect if a browser window is not currently active? 问题的选定答案应该有效。它利用了 W3C 于 2011-06-02 起草的Page Visibility API。

【参考方案4】：

这可以与 JQuery 一起使用

$(function() 
    $(window).focus(function() 
        console.log('Focus');
    );

    $(window).blur(function() 
        console.log('Blur');
    );
);

【讨论】：

我认为这无济于事，因为他报告说浏览器不会触发您在“模糊”中附加的事件功能。因此，在您的示例中，代码 console.log('Blur'); 在某些情况下不会被调用。

【参考方案5】：

在Chrome中，您可以使用小于1秒的超时运行后台脚本，当标签没有焦点Chrome时，只需每秒运行它。示例；

这在 Firefox 或 Opera 中不起作用。不知道其他浏览器，但我怀疑它也可以在那里工作。

var currentDate = new Date();
var a = currentDate.getTime();

function test() 
    var currentDate = new Date();
    var b = currentDate.getTime();
var c = b - a;
    if (c > 900) 
        //Tab does not have focus.
     else 
        //It does
    
    a = b;
    setTimeout("test()",800);




setTimeout("test()",1);

【讨论】：

我不喜欢在应该发生的事情上使用间隔的想法。请注意，您应该使用setTimeout(test, 800)。如果你给它一个字符串，它会eval()它，这要慢得多。

【参考方案6】：

我发现将 onblur= 和 onfocus= 事件添加到内联绕过了该问题：

【参考方案7】：

毕竟它可能会起作用，我很好奇并写了这段代码：

...
setInterval ( updateSize, 500 );
function updateSize()
  if(window.outerHeight == window.innerHeight)
    document.title = 'not focused';             
   else 
    document.title = 'focused';
  

  document.getElementById("arthur").innerHTML = window.outerHeight + " - " + window.innerHeight;

...
<div id="arthur">
  dent
</div>

这段代码完全符合您的要求，但方式很丑陋。问题是，Chrome 似乎不时会忽略标题更改（切换到选项卡并按住鼠标 1 秒钟似乎总是会产生这种效果）。

您会在屏幕上看到不同的值，但您的标题不会改变。

结论： 无论你在做什么，在测试时不要相信结果！

【讨论】：

标题对我来说立即改变。如果我将事件更改为 mouseover 和 mouseout，我会立即获得结果。

无论如何，感谢 (window.outerHeight == window.innerHeight) 部分。对于这个特定的项目，我只需要知道用户当前是否专注。无需经常检查，您的代码就可以工作。