无法从 Youtube IFrame 更改焦点

【问题标题】：Can't Change Focus from Youtube IFrame无法从 Youtube IFrame 更改焦点
【发布时间】：2015-04-06 18:30:56
【问题描述】：

我有一个Youtube iFrame，我使用键盘快捷键控制播放。但是，当我快进/快退时，焦点会变为 iFrame，它会捕获后续按键。因此，当焦点更改为 iFrame 时，我使用一个简单的函数进行轮询，然后将焦点切换回文档正文。这是实时代码：

CODEPEN

但是，它不起作用！即使 document.body.focus() 被调用，焦点也不会从 iFrame 改变。知道如何解决这个问题吗？

注意：我在 Surface Pro 3 (Win 8.1) 上使用的浏览器是 Chrome 41.0.2272.118

【问题讨论】：

似乎对我有用
真的吗？你可以快进两次？我的快进一次，然后任何后续的右箭头按下都会擦掉视频

标签： javascript iframe youtube

【解决方案1】：

似乎focus() 仅适用于按钮（在document.body 和常规<p> 元素上测试，两者均无作用）。

Fixed CODEPEN (old, see update below!)

请注意，我在document.body.focus() 之前添加了document.getElementById("btn").focus()，但焦点切换到btn 而不是document.body。我在 Surface Pro 3 (Win 8.1) 上使用的浏览器是 Chrome 41.0.2272.118

更新

事实证明，如果使用display:none 或visibility:hidden 隐藏按钮，focus() 方法将不再起作用！这让我怀疑问题实际上在于元素是否可聚焦。显然tabindex 的-1 使元素可聚焦，所以我在调用document.body.focus() 之前通过设置document.body.tabIndex = -1; 对此进行了测试。你瞧，它工作正常！

updated CODEPEN

【讨论】：