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

Question

我想在标签更改或快速切换时结束全屏模式。 是否可以用 javascript 做到这一点？

我有以下 javascript 代码结束全屏我需要帮助检测铬间标签的变化[使用 ctrl + 标签快捷方式] 也检测 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();
}

我想将此代码包装在开关选项卡 function 中。 请帮忙。

我也试过——

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

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

Answer 1

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

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

Answer 2

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

如果没有我们可以收听的事件，这还不够好，这就是 API 还提供有用的可见性更改事件的原因。

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

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

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

参考

Answer 3

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

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

这对我有用！ 希望这对于在全屏和使用alt + tab时检测选项卡更改很有用