Question

我想写一个网页进行在线测验。我的基本要求是，如果参加测验的人改变标签或打开新窗口，即使没有最小化浏览器，即如果该人试图看到答案来自一些其他的窗口/标签，测验应该停止。我怎么能这样做？
P.S：它不应该是一些非常新的HTML5功能。我希望目前所有主流浏览器都支持它。

Answer 1

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

在jQuery中它将是

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

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

引用此SO回答：https://stackoverflow.com/a/1760268/680578

Answer 2

如果您的目标是支持它的浏览器，则可以使用HTML5中提供的Page Visibility API。它不会直接检测标签更改，但是可见性会发生变化。其中包括（但不限于）标签更改。

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

Answer 3

在2020年，您可以：

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

Answer 4

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

  setInterval( checkFocus, 200 );

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

Answer 5

使用jQuery：

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

});

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

});

$().focus和$().blur已过时。

Answer 6

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

    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/

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

6 个答案: