How iframe can capture keyboard like flash?

I have made a JS/HTML5 game which is controlled by keyboard, I like to make it embeddable like flash games, but when I embed it inside an iframe it only capture keyboard events when iframe is focused. If user interact with other element on the page iframe will lose focus and the game will not receive events.

How can I make it always capture keyboard events from inside iframe and avoid defaults like flash games? For example using space for firing instead of scrolling, from inside iframe.

Why down vote?

Answers


This is one way to do it:

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

window.setInterval(focus, 100); 

or jQuery:

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

This needs to be run on the host page of course, because allowing an embedded iframe to steal focus is not in the nature of browser/webpage security.

Good luck.


This is not normally possible because of a browser security feature called the Same-Origin-Policy. 1

Basically, one page on one domain can not interact with or intercept the events of another page because it would present a security risk. Imagine opening a frame to a user's bank account and then capturing keypresses they did in that frame -- obviously that would be a Very Bad Thing (tm). It works the other way around too, the contents of a frame can not see events on the parent page unless they are on the same domain.

Now browsers do still want to allow you to interact with contents within a frame. So when you start interacting with contents of one frame, the other frame loses any awareness of what's going on.

So, after all this, you're probably still wondering how to address your problem. Here are a few good options.

  1. Instead of loading your game in an iframe, have the user embed it into their current page instead. You could have them do this by either providing them with the code to your game and having them place it in their page, or by providing a script tag that loads code from your own server and places the game into their page.

  2. Use Cross-Document messaging 2, A relatively new browser feature that allows pages to get around the normal Same-Origin-Policy restrictions. Basically, with Cross Document Messaging, you can run javascript on the parent page that sends events into the page within the iframe.


This is not a complete Solution but an Idea....

What about capturing all Keyboard events on the site and then decide (e.g. by checking the value of some invisible input/element within the iframe) if a game is in progress. If it is, preventDefault of the action and trigger some custom event inside the iframe and just make your game listen for the custom events too...

Actually I just found this: Access elements of parent window from iframe That way you could apply my solution from within the Iframe and check for clicks/keys on its parent

Regards


Need Your Help

How to zoom into a specific area of a DirectShow window?

c# directshow directshow.net

I'm trying to zoom into the area of the DirectShow window between Marker A and Marker B(It's a RangeBar) which represent the width of the video window.

added event listener but 2 clicks needed

javascript jquery

I have added event listeners to some divs on $(document).ready. However, the very first time, it takes two clicks to fire the event (or at least to get the result.)