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

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

iframe events javascript

PaweÅ · 技术社区 · 5 年前

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

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

0 回复 | 直到 5 年前

Kaiido 5 年前

没有办法听这些事件 “当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.

推荐文章

mlsmet · 无法在Android手机上水平滚动表格

2 年前

lord stock · 硒在iframe中引发与下拉菜单相互作用的非接触元素异常

2 年前

ironmantis7x · 我无法使用html更改iframe中文本的文本颜色

2 年前

GÊá´á´á´ÊCá´á´ · 如何预加载或检测CDN承载的视频何时加载到盖茨比的折叠上方?

2 年前

ControlAltDel · 从iframe中加载的html页面上的源脚本获取Javascript变量

2 年前

Soniya Joshi · Android如何在Android iframe webview中传递url?

6 年前

Hellpless · 根据iframe-Google自动播放策略中的allow=“Autoplay”属性激活自动播放

6 年前

rosu alin · Vimeo视频不会在iframe中的chrome上启动。未调用LoadProgress

6 年前

Mahsa · 如何在javascript中获取iframe中链接的坐标

6 年前

Dixon Chaudhary · 在Laravel中维护会话和身份验证

6 年前