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

Question

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

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

Answer 1

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

在 jQuery 中它会是

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

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

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

Answer 2

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

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

Answer 3

如果您的目标浏览器支持它，您可以使用 HTML5 中提供的 Page Visibility API。它不会直接检测选项卡更改，例如，但可见性更改。这将包括（但不限于）选项卡更改。

请参阅https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

Answer 4

最好的本机函数，没有 jQuery。

document.hasFocus

检查笔，检查当您转到链接并返回 codepen 选项卡时会发生什么。

https://codepen.io/damianocel/pen/Yxxzdj

Answer 5

使用 jQuery：

$(window).on('focus', function () {

});

$(window).on('blur', function () {

});

$().focus&$().blur已弃用。

Answer 6

从事类似的项目。这效果最好。在通常不会重新渲染的最高级别组件上，添加：

  setInterval( checkFocus, 200 );

  function checkFocus(){
    if(document.hasFocus()==false){
      //Do some checking and raise a red flag if this runs during an exam.
    }
  }

Answer 7

窗口onfocus和onblur工作正常：

window.onfocus = function (ev) {
    console.log("gained focus");
};

window.onblur = function (ev) {
    console.log("lost focus");
};

Answer 8

我需要这样的东西，似乎每个浏览器的这种行为都略有不同。

    if (document.hidden !== undefined) { // Opera 12.10 and Firefox 18 and later support     
      visibilityChange = "visibilitychange";
    } else if (document.mozHidden !== undefined) {      
      visibilityChange = "mozvisibilitychange";
    } else if (document.msHidden !== undefined) {      
      visibilityChange = "msvisibilitychange";
    } else if (document.webkitHidden !== undefined) {      
      visibilityChange = "webkitvisibilitychange";
    } else if (document.oHidden !== undefined) {      
      visibilityChange = "ovisibilitychange";
    }
    
    document.addEventListener(visibilityChange, function(event) {
      handleVisibilityChange();
    }, false);

我有一个例子你可以检查： https ://jsfiddle.net/jenol/4g1k80jq/33/