使用 JavaScript 检测用户何时切换标签

在本文中，我将向您展示如何使用 JavaScript 来获取用户在浏览器中切换标签页的时间。这将会很有趣，有助于了解用户何时会失去注意力。您甚至可以使用它来将数据添加到数据库中（这超出了本文的讨论范围）。

我知道有两种方法可以解决这个问题。所以，我会向你们展示这两种方法。

方法 - 1

在这个方法中，我们将使用两个事件监听器focus（当用户聚焦于您的网站或窗口时）和blur（当用户失去焦点时）

实际上我们不需要 HTML，因为当用户在另一个标签页时，他们看不到你的网站页面。只有 JavaScript 可以做到：



// when the user loses focus
window.addEventListener("blur", () => {
    document.title = "Breakup";
});

// when the user's focus is back to your tab (website) again
window.addEventListener("focus", () => {
    document.title = "Patch Up";
});

方法 - 2

在这个方法中，我们只需要一个事件监听器（visibilitychange）。它有一个属性visibilityState，我们可以用它来检测窗口的切换状态。



document.addEventListener("visibilitychange", () => {
    // it could be either hidden or visible
    document.title = document.visibilityState;    
});

您可以使用它们为您的网站添加许多功能，例如当用户失去焦点时停止音乐或视频：



document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    music.play();
  } else {
    music.pause();
  }
});

如果你想亲自尝试一下，那就看看现场直播

总结：

这就是检测用户何时切换标签页所需的全部内容。两种方法均能正常工作。您可以使用其中任何一种。如果您喜欢这篇文章，别忘了点赞❤️；如果您有任何问题或反馈，请随时在下面的评论区留言。下篇文章再见。

🌐 与我联系：

Twitter
Github
Instagram
时事通讯
 LinkedIn
网站
 给我买杯咖啡

文章来源：https://dev.to/j471n/detect-when-users-switch-tabs-using-javascript-3mi3