检测浏览器页面窗口失去焦点时使用纯JS或jQuery的Alt-Tab [英] Detect when a browser page window loses focus with Alt-Tab using pure JS or jQuery

问题描述

是否可以检测当前页面是否在alt-tab？
此代码仅在打开浏览器中的新选项卡时有效：

 （function（）{
 var hidden =hidden; 
 
 //标准：
 if（隐藏在文档中）
 document.addEventListener（visibilitychange，onchange）; 
 else if （在文献（隐藏= mozHidden））
 document.addEventListener（ mozvisibilitychange，平变化）; 
，否则如果（（于文件隐藏= webkitHidden））
 document.addEventListener （ webkitvisibilitychange，平变化）; 
，否则如果（（于文件隐藏= msHidden））
 document.addEventListener（ msvisibilitychange，平变化）; 
 // IE 9和下：
 else if（onfocusinin document）
 document.onfocusin = document.onfocusout = onchange; 
 //所有其​​他：
 else 
 window.onpageshow = window.onpagehide 
 = window.onfocus = window.onblur = onchange; 
 
函数onchange（evt）{
 var v =visible，h =hidden，
 evtMap = {
 focus：v，focusin：v，pageshow：v，blur：h，focusout：h，pagehide：h 
}; 
 
 evt = evt || window.event; 
 if（evt.type in evtMap）
 document.body.className = evtMap [evt.type]; 
 else 
 document.body.className = this [hidden]？ 隐藏：可见; 
 //console.log(this[hidden）？hidden：visible）; 
} 
 
 //设置初始状态（但仅当浏览器支持页面可见性API时）
 if（document [hidden]！== undefined）
 onchange （{type：document [hidden]？blur：focus}）; 
}）（）; 
  

但是这段代码并没有检测到浏览器的新窗口，也没有检测到任何其他程序的alt-tab。有没有可能检测到它？或者在jQuery中？

编辑
新页面意味着Ctrl（cmd）+ N（新窗口）热键。上面的代码无法检测到这一点。 Alt（cmd）+标签到另一个程序 - 不可能检测到。
上面的代码只能检测到Ctrl（cmd）+ T（新标签）

编辑
我想检测用户何时从其他应用程序返回到我的网站。也就是说，如果用户关闭了任何选项卡（例如按Ctrl + W）并返回到我的网站，则可以使用上面的脚本检测到此操作。但是，如果用户从其他应用程序返回到我的网站（例如通过Alt + Tab），脚本不起作用，因为 window.onfocus 不会被触发！也就是说，

  window.onpageshow = 
 window.onpagehide = window.onfocus = window.onblur 
  

不适用于Alt + Tab操作。是否更清晰？

解决方案

您可以简单地使用 onfocus 事件在窗口中，如下所示：

  window.onfocus = function（） {
 console.log（'Got focus'）; 
 
 
 
 $ b如果需要，你也可以使用 onblur  code>，以便进行更加严格的处理。 
Is it possible to detect current page is in alt-tab?
This code works only if a new tab in browser is opened:
(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
    document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
    document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
    document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
    document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  //console.log(this[hidden] ? "hidden" : "visible");
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();
But this code does detect neither new window of the browser nor alt-tab into any other programm. Is it possible to detect it? Or in jQuery?

EDIT
New page means Ctrl(cmd)+N (new window) hotkey. The code above can not detect this. Alt(cmd)+tab to another program - impossible to detect too.
The code above can only detect Ctrl(cmd)+T (new tab)

EDIT
I want to detect when a user return to my site from another application. That is, if a user closes any tab (e.g., by Ctrl+W) and returns to my site I can detect this action using the script above. But if a user returns to my site from another application (e.g., by Alt+Tab) the script doesn't work because window.onfocus will not be fired! That is,
 window.onpageshow =
 window.onpagehide = window.onfocus = window.onblur 
doesn't work for Alt+Tab action. Is it more clear?
解决方案
You can simply use the onfocus event on window, like in:
window.onfocus = function() {
  console.log('Got focus');
}
If needed, you can also use onblur for a more acute handling.

                        
这篇关于检测浏览器页面窗口失去焦点时使用纯JS或jQuery的Alt-Tab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！