如何确定选择了浏览器选项卡并在 JavaScript 中执行代码？答案

【问题标题】：How to determine that a browser tab is selected and execute code in JavaScript?如何确定选择了浏览器选项卡并在 JavaScript 中执行代码？
【发布时间】：2020-06-03 10:02:22
【问题描述】：

我想在多个浏览器选项卡上打开一个相同的页面。当我单击一个浏览器选项卡时，我希望 JavaScript 函数执行一次，一次！并不是说该函数被执行了 3 次，因为例如在 3 个浏览器选项卡上打开了一个相同的页面。

我试过了：

window.addEventListener("focus", () => {
     console.log(document.hasFocus());
});

如果您的光标聚焦在网络浏览器上并不断在该浏览器上的选项卡之间切换，则此方法可以正常工作。

但是，如果您首先将光标放在该 Web 浏览器以外的其他东西上（例如计算机桌面或代码 IDE），然后单击非活动浏览器选项卡，则上述代码将被执行两次，一次由上一个活动选项卡，另一次是您刚刚单击的新活动选项卡。

这是我的问题。

如何在单击 Web 浏览器选项卡时只执行一次 JavaScript 代码？除了 JavaScript 代码之外的任何解决方案也受到欢迎，例如跟踪像素或输入字段自动对焦事件，只是为了命名样本。我并不是说跟踪像素技术会有所帮助。我没有使用 jQuery。我正在使用 VueJs。

【问题讨论】：

也许你要找的是Visibility APIdeveloper.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
Page Visibility API 在某些用例中是可以接受的，但如果您有两个单独的浏览器窗口并排可见，则每个窗口都有两个选项卡。这意味着总共有 4 个选项卡，并且源中的两个选项卡是可见的，每个选项卡在每个窗口上。作为人类，只有一个选项卡可以处于活动状态。你点击的那个。但是对于 Page Visibility API，两个选项卡处于活动状态，每个浏览器窗口上的每个选项卡并排显示。您点击哪个可见标签并不重要。

标签： javascript vue.js browser-tab

【解决方案1】：

在将其用于最终编码风格之前，您可能希望使用这种古老的方法和 JS 语法。有一些经典的香草味。它从不疼。

document.body.onfocus = function(e){console.info(e.type)}

should work exactly as requested...
but since this behavior is somewhat tied to the BOM, some browser vendors (with idiosyncratic behaviors) might require some sort of enforced filtering,  Opera comes to mind. 

But it should be rock solid on all modern browsers including a bonus backward compatibility, as back as Windows 98 browser version. And\or the ancient and now probably forgoten NN 4.7. ( except for the console info event log, but that's not needed for the actual use anyway )

【讨论】：