用于检测用户是否更改选项卡的 Javascript

Question

我正在为在线测验编写一个网页。我的基本要求是，如果用户更改选项卡或打开新闻窗口，即使没有最小化他们的浏览器，它也必须触发一个事件（停止测验），即如果该人试图从其他窗口/选项卡中查看答案。我怎样才能做到这一点？

注意： 尽量避免在您的答案中包含前沿的 HTML5 功能，因为我希望当前所有主流浏览器都支持该功能。

原文由 Maxsteel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过将模糊/焦点事件侦听器附加到窗口来确定选项卡或窗口是否处于活动状态。

在 jQuery 中它会是

$(window).focus(function() {
    //do something
});

$(window).blur(function() {
    //do something
});

引自这个 SO 答案： https ://stackoverflow.com/a/1760268/680578

原文由 Kristian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 2022 年，您可以将事件侦听器与 visibilitychange 事件一起使用：

 document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    console.log("tab is active")
  } else {
    console.log("tab is inactive")
  }
});

原文由 Bart Blast 发布，翻译遵循 CC BY-SA 4.0 许可协议