iframe如何捕捉像闪光灯一样的键盘？

我已经做了一个JS/HTML5游戏，它是由键盘控制的，我喜欢使它像嵌入式Flash游戏一样可嵌入，但是当我将它嵌入到iframe中时，它只能在iframe集中时捕获键盘事件。如果用户与页面上的其他元素交互，iframe将失去焦点并且游戏不会接收事件。iframe如何捕捉像闪光灯一样的键盘？

我该如何使它始终从内部iframe中捕获键盘事件并避免像Flash游戏那样的默认值？例如，从iframe内部使用空间来代替滚动。

为什么要投票？

来源

2014-01-31 Ali Shakiba

我有一个应用程序，它在iframe中工作得很好。它使用箭头键，转义等。只需要关注iframe，否则主页将捕获关键事件。你的问题究竟在哪里？你是如何编码的？使用jQuery？你是否防止默认（e.preventDefault）？绝对需要更多信息。 – Abhitalks

@abhitalks使用任何东西都可以。问题在于，保持iframe的重点几乎是不可能的。如果用户与页面上的其他元素进行交互，iframe将失去焦点（与Flash游戏不同，它将不再接收事件）。 –

为什么你会在这个世界做出这个？您可以使用全屏或自定义脚本来自动聚焦iframe，但这里提出的问题确实是一个错误的问题。 – ProllyGeek

这是做这件事：

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

window.setInterval(focus, 100);

或jQuery的：

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

这需要过程的主网页上运行，因为允许嵌入的iframe来偷焦点而不是浏览器/网页安全的性质。

祝你好运。

来源

2014-05-12 09:47:34

请参阅问题评论。 –

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

有关捕获网站上的所有键盘事件，然后决定（例如，通过检查iframe中的一些无形的输入/元素的值），如果一场比赛正在进行中。如果是，该行动的preventDefault并引发一些自定义事件的iframe中，也将让你的游戏听太多的自定义事件......

其实我刚刚发现这一点： Access elements of parent window from iframe 您可以申请我的解决方案，这样从iframe内，并检查是否有点击/按键其父

问候

来源

2014-05-16 04:20:54 user3567992

这是因为浏览器的安全功能通常不太可能称为同源-政策。 1

基本上，一个域上的一个页面不能与另一个页面的事件进行交互或截取，因为它会带来安全风险。想象一下，为用户的银行账户开放一个框架，然后捕获他们在该框架中完成的按键操作 - 显然这将是一件非常糟糕的事情（tm）。它也可以用其他方式工作，框架的内容不能在父页面上看到事件，除非它们在同一个域中。

现在，浏览器仍然希望允许您与框架内的内容交互。所以当你开始与一个帧的内容进行交互时，另一个帧就会失去对发生什么事情的意识。

所以，毕竟，你可能仍然想知道如何解决你的问题。这里有几个很好的选择。

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

来源

2014-05-17 02:13:53 Gdeglin

在我看来，虽然禁止跨域iframe通信的安全性很好，但它也没用，因为恶意网站可能只是代理和欺骗您的网站 –

虽然这是真的，但这会更糟，因为用户可能已经记录进入框架内的网站，因此感到安全输入更多的敏感信息，或看到有效的“安全图像”（如一些银行网站使用）的登录提示。但无论如何，同样的原始策略也被用来防止其他类型的跨域交互，例如，可以用于xss或会话劫持。 – Gdeglin

iframe如何捕捉像闪光灯一样的键盘？

回答

相关问题