Question

我制作了一个由键盘控制的JS / HTML5游戏，我喜欢将它嵌入到flash游戏中，但是当我将它嵌入到iframe中时，它只捕获iframe聚焦时的键盘事件。如果用户与页面上的其他元素进行交互，则iframe将失去焦点并且游戏将无法接收事件。

如何让它始终从内部iframe捕获键盘事件并避免像Flash游戏这样的默认设置？例如，从iframe内部使用空间进行触发而不是滚动。

为什么要投票？

Answer 1

这是一种方法：

function focus()
{
    var iframe = document.getElementById('iframe-element')
    iframe.contentWindow.focus();
}

window.setInterval(focus, 100);

或jQuery：

$("body").click(function(){
  $('#iframe-element').focus();
});

当然，这需要在主页上运行，因为允许嵌入式iframe窃取焦点不符合浏览器/网页安全性。

祝你好运。

Answer 2

由于名为Same-Origin-Policy的浏览器安全功能，通常不可能这样做。 1

基本上，一个域上的一个页面不能与另一个页面的事件交互或拦截，因为它会带来安全风险。想象一下，向用户的银行账户打开一个框架，然后捕获他们在该框架中所做的按键 - 显然这将是非常糟糕的事情（tm）。它的工作原理相反，框架的内容无法在父页面上查看事件，除非它们位于同一个域中。

现在，浏览器仍然希望允许您与框架内的内容进行交互。因此，当您开始与一个框架的内容进行交互时，另一个框架将无法了解正在进行的操作。

所以，在这之后，您可能仍然想知道如何解决您的问题。这里有一些不错的选择。

不要将游戏加载到iframe中，而是让用户将其嵌入到当前页面中。您可以让他们通过向游戏提供代码并让他们将其放置在他们的页面中，或者通过提供从您自己的服务器加载代码并将游戏放入其页面的脚本标记来实现此目的。
使用跨文档消息传递2，这是一种相对较新的浏览器功能，允许页面绕过正常的同源策略限制。基本上，使用Cross Document Messaging，您可以在父页面上运行javascript，该页面将事件发送到iframe中的页面。

Answer 3

这不是一个完整的解决方案，而是一个想法......

如果游戏正在进行中，那么捕获网站上的所有键盘事件然后决定（例如通过检查iframe中某些不可见输入/元素的值）。如果是，则阻止操作的默认并触发iframe中的一些自定义事件，并让你的游戏也听取自定义事件......

其实我刚刚发现了这个： Access elements of parent window from iframe 这样您就可以在Iframe中应用我的解决方案并检查其父级的点击/键

此致