如何使用Javascript判断浏览器选项卡是否处于聚焦状态？

Question

有一个类似的问题在这里。但是，当页面初始加载时，它不起作用，因为如果例如用户在新标签页中打开该页面并且没有获得焦点，则模糊事件不会触发。

那么最好的方法是什么？

目前，我的临时解决方案是假设选项卡在加载时被模糊，并将函数绑定到文档的mouseover事件上，以将其设置为聚焦状态。 但是，如果用户没有将鼠标放在页面上，则无法正常工作。

- fent

Answer 1

借鉴您提供的代码，将默认设置为模糊：

<div id="blurDiv"></div>

<script>

var updateStatus = (function() {

  // Private stuff
  var el = document.getElementById('blurDiv');

  // The updateStatus function
  return function (evt) {
    evt = evt || window.event;
    var evtType = evt.type;
    var state;

    // Determine state
    if (evtType == 'load' || evtType == 'blur' || evtType == 'focusout' ) {
      state = 'blurred';
    } else {
      state = 'focussed';
    }

    // Now do something...
    el.innerHTML += '<br>' + state
  };
})();

window.onload = updateStatus;

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = updateStatus;
    document.onfocusout = updateStatus;
} else {
    window.onfocus = updateStatus;
    window.onblur = updateStatus;
}

</script>

IE似乎会触发很多额外的事件，每次焦点变化时，都会先失去焦点再获得焦点，因此在页面上单击某些元素时会产生许多无关的失去/获得焦点对。

- RobG

---

加载这段代码时不会进行任何检查，它默认模糊状态。 - fent

没有什么需要检查的，脚本依赖于冒泡事件。当焦点事件在窗口或文档上触发时，在浏览器之间是不一致的，没有强大的方法，但在第一个之后，它们是相对可预测的。 哦，这与光标无关，而与焦点有关。你可以通过许多方式改变焦点，而不仅仅是光标。 - RobG

我想说的是，在脚本的开头，您确实需要检查选项卡是否聚焦或模糊，因为事件只有在选项卡聚焦或模糊时才会触发。如果选项卡已经聚焦/模糊，那么在开始时不会发生这种情况。您的脚本假定选项卡在加载时总是处于模糊状态，但这并不总是正确的。 - fent

我想说的是你无法检查，因为没有任何东西可供检查。 - RobG

你是在说这个问题无法回答吗？ - fent

我想是这样的。没有属性可以检查，所以你必须等待事件的发生。如果浏览器在适当的时间没有触发事件（因为没有标准，不同的浏览器似乎在不同的时间触发焦点事件），那么你就没办法了。 - RobG