如何检测用户何时使用 javascript 切换选项卡？答案

【问题标题】：How can I detect when user switches the tab using javascript?如何检测用户何时使用 javascript 切换选项卡？
【发布时间】：2020-06-20 04:13:52
【问题描述】：

我想在标签改变或快速切换时结束全屏模式。可以用javascript来做吗？

我有以下结束全屏的 javascript 代码我需要帮助来检测 Chrome 间选项卡的变化 [使用 ctrl + tab 快捷方式] 还可以检测 Windows 选项卡的变化，例如当一个人将 chrome（任何浏览器）切换到文件时资源管理器（例如）[使用 alt + tab 快捷方式]。

我的 javascript 代码 --

if (document.exitFullscreen) {
  document.exitFullscreen();
} 
else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} 
else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} 
else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

我想将此代码包装在切换选项卡功能中。请帮忙。

我也试过了-

document.addEventListener("visibilitychange", function tabsswitch() {
   if(document.hidden) {
     alert('document hidden')
   } 
});

但是当我更改 windows 选项卡时这不起作用，例如我从 chrome 切换到我的代码编辑器并再次回到 chrome 它不显示任何警报。

【问题讨论】：

标签： javascript html

【解决方案1】：

有 HTML 5 API 来检测标签可见性是否改变：

document.addEventListener("visibilitychange", function () {});

【讨论】：

抱歉，这对于跨 chrome 选项卡切换工作正常，但不适用于程序切换。
程序切换对你来说是什么意思？

【解决方案2】：

Page Visibility API 为我们提供了两个顶级属性：document.hidden（布尔值）和 document.visibilityState（可以是以下字符串中的任何一个：“hidden”、“visible”、“prerender”、“unloaded” ）。

如果没有我们可以监听的事件，这还不够好，这就是 API 还提供有用的 visibilitychange 事件的原因。

下面是一个基本示例，说明我们如何对可见性更改采取行动：

function handleVisibilityChange() {
  if(document.hidden) {
    // the page is hidden
  } else {
   // the page is visible
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

Reference

【讨论】：

当我在 chrome 中更改标签时，这工作得很好，但程序切换不成功。

【解决方案3】：

我遇到了类似的问题，但使用 FullScreen 模式选项卡可见性不起作用。要在使用 alt + tab 时检测可见性，请将其添加到现有代码中

window.addEventListener('focus', function() {
  console.log('show');
}, false);
window.addEventListener('blur', function() {
   console.log('hide');
}, false);

这对我有用！希望这对于在全屏和使用 alt + tab

时检测标签更改很有用

【讨论】：