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

Question

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

Answer 1

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

在jQuery中它会是

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

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

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

Answer 2

2020 年，您可以：

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

窗口onfocus并且onblur工作正常：

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

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

Answer 6

使用 jQuery：

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

});

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

});

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