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

时间:2012-04-26 17:49:12

标签: javascript html


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

6 个答案:

答案 0 :(得分:50)

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

在jQuery中它将是

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

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

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

答案 1 :(得分:25)

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

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

答案 2 :(得分:13)

在2020年,您可以:

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

答案 3 :(得分:1)

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

  setInterval( checkFocus, 200 );

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

答案 4 :(得分:0)

使用jQuery:

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

});

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

});

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

答案 5 :(得分:0)

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

    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/