Question

当用户在网站外部单击时，就会产生模糊，并且我捕获到焦点丢失事件。当用户在网站上单击时，就会调用焦点，然后我捕获到焦点增益事件。

但是使用iframe时，它的工作原理有所不同。对于一个iframe，它被视为另一个网站，是一个“标签”。所以我有以下听众：

document.addEventListener('blur', function() {
    if (document.activeElement !== document.getElementsByTagName('iframe')[0]) {
        callback(isVisible(false));
    }
}, false);

document.addEventListener('focus', function() {
    callback(isVisible(true));
}, false);

这可以防止当您单击iframe导致焦点丢失时，但是当您在网站/浏览器外部单击时，则不会捕获任何事件，但是只要单击父级然后在外部单击，它就可以捕获焦点遗失事件。

所以我所需要的是，当活动元素是iframe并在父网站的外部单击时，它应该捕获焦点丢失事件isVisible(true)

Answer 1

我能找到的唯一方法是每几毫秒检查一次Document上的hasFocus。我选择了700ms。

setInterval(t.checkFocus, 700);
checkFocus() {
  if ( document.hasFocus() ) {
    if (!this.inFocus) {
      analytics.focusGained(this);
      this.inFocus = true;
    }
  } else {
    if (this.inFocus) {
      analytics.focusLost(this);
      this.inFocus = false;
    }
  }
}

Javascript-将注意力集中在iFrame上并有所收获

1 个答案: