代码之家 › 专栏 › 技术社区 › PaweÅ

聚焦iframe时,不调用父窗口事件。如何预防?

iframe events javascript

PaweÅ · 技术社区 · 7 年前

我有一些 window 'keydown' 添加了主DOM中的事件侦听器。 iframe 在DOM里。当我单击DOM中的任何元素时,所有 keydown 听众被调用,但当我点击youtube iframe时(例如,为了提高音量),所有 键盘按下 听众停止工作。

我知道 iframe公司 document 和 窗口 对象,也许浏览器会切换窗口并侦听iframe侦听器,但是当iframe被聚焦时,是否有任何方法可以保持父窗口键盘侦听器在事件中工作?

0 回复 | 直到 7 年前

Kaiido 7 年前

没有办法听这些事件 “当iframe聚焦时” .

然而,如果你真的不需要这个iframe有焦点,那么你可以试着强迫它不能获得焦点。

这样做有点老套,不同的浏览器似乎有不同的行为,但要点很简单:
blur 事件,并从那里,称其为 focus() 方法。

如前所述,这主要是一个黑客攻击,需要对不同的浏览器进行调整;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.