javascript - 当 iframe 获得焦点时，不会调用父窗口事件。如何预防呢？

Question

我在主 DOM 中添加了一些 window 'keydown' 事件监听器。我在 DOM 中还有一个 youtube api iframe 。当我点击 DOM 中的任何元素时，所有 keydown 监听器都会被调用，但是当我点击 youtube iframe 时(例如调高音量)，所有 keydown 监听器都会停止工作。

我知道iframe有自己的document和window对象，也许浏览器会切换窗口并监听iframe监听器，但是当 iframe 聚焦时，有什么方法可以让父窗口键盘监听器工作事件？

Answer 1

无法监听这些事件“当 iframe 获得焦点时”。

但是，如果您确实不需要此 iframe 获得焦点，那么您可以尝试强制它不获得焦点。

这样做有点hackish，不同的浏览器似乎有不同的行为，但要点很简单:
监听主窗口的 blur 事件，然后调用其 focus() 方法。

如前所述，这主要是一种 hack，需要针对不同的浏览器进行调整； Firefox 需要立即调用它，Chrome 需要一点超时(幸运的是两者并不冲突)。

另请注意，这显然会破坏 YoubeTube 自己的关键监听器，从而破坏其键盘控制。

使用风险自负，并务必在各种环境中进行测试:

document.onkeydown = e => {
  e.preventDefault();
  console.log(e.key);
}

onblur = e => {
  if (e.currentTarget === e.target) {
    focus(); // FF
    setTimeout(focus, 20); // Chrome
  }
};
overlay.onclick = function() {
  this.remove()
};

#overlay {
  position: absolute;
  text-align: center;
  background: white;
  width: 100vw;
  height: 100vh;
}

<div id="overlay"><button>begin demo</button></div>
<iframe srcdoc="<input value='can not type here'><button onclick='alert(`clicked`)'>button still works</button>"></iframe>

And as a jsfiddle which allows iframes to YouTube.