如何知道浏览器选项卡在加载 Javascript 时是否聚焦？

Question

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

那么最好的方法是什么？

目前，我的临时解决方案是假设选项卡在加载时是模糊的，并将一个函数绑定到文档的鼠标悬停事件，将其设置为焦点。但如果用户没有鼠标在页面上，这将不起作用。

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 似乎触发了许多额外的事件，每次获得焦点时，首先会出现模糊，然后是焦点，因此单击页面中的内容会产生大量虚假的模糊/焦点对。