Capturing keyboard input within an iframe

[radcorps]

I have just finished building a game using Pixi.js. I am using the keyboard example on this page https://github.com/kittykatattack/learningPixi for keyboard input. 

function keyboard(keyCode) {var key = {};key.code = keyCode;key.isDown = false;key.isUp = true;key.press = undefined;key.release = undefined;//The `downHandler`key.downHandler = function(event) {if (event.keyCode === key.code) {if (key.isUp && key.press) key.press();key.isDown = true;key.isUp = false;}event.preventDefault();};//The `upHandler`key.upHandler = function(event) {if (event.keyCode === key.code) {if (key.isDown && key.release) key.release();key.isDown = false;key.isUp = true;}event.preventDefault();};//Attach event listenerswindow.addEventListener("keydown", key.downHandler.bind(key), false);window.addEventListener("keyup", key.upHandler.bind(key), false);return key;}

I understand that this is technically not a PIxi.js issue as the code above is just using standard Javascript. However I would like to know how others are overcoming this problem. What is the accepted way for handling keyboard input that would allow this project to also work inside of an iframe? 

 

Example of game working (no iframe): http://www.adamhportfolio.com/WebGames/LD33/

Example of game embedded in an iframe (keyboard input not working): http://adamhportfolio.com/ludum-dare-33-entry/

 

The code for the project if required can be found here: https://github.com/rad-corps/WebGames/tree/master/LD33

 

index.html is the entry point then GameLoop.js has the keyboard handling to get from the main menu to the game. Sorry its a mess, it was for a 72 hour game jam.

 

 

 

[andreas_d]

Haven't tried this but pretty sure this has smth to do with the eventlisteners being attached to window.  Look at the iframe contentWindow property

 

http://www.w3schools.com/jsref/prop_frame_contentwindow.asp

[radcorps]

Thanks andreas_d but I haven't had any success with the contentWindow property on iFrame. Although, you have made me think top down about the problem rather than bottom up. I found the following jsfiddle which may do the trick. I will try it when I get home. http://jsfiddle.net/rfkqe64j/

[radcorps]

No, still no luck. I am surprised that this isn't a more common issue. 

[radcorps]

Another small update: By increasing the iframe size to above the canvas size. I can now click in the "non-canvas" area of the iframe and will get keyboard input. But if I click inside the canvas itself, I dont get any keyboard input still. I guess Im getting closer.

 

Another small observation: If I activate the keyboard input by clicking in said area then click inside the canvas, it still remains active. See http://adamhportfolio.com/ludum-dare-33-entry/ for example on what I mean. I have left the border on the iframe to make it obvious where to click (inside the border but not inside the canvas). Anyone have any ideas? 

[radcorps]

Problem solved. My issue ended up being two pronged:

• I was triggering a browser security exception by using the absolute path to my website in the iframe (<iframe src="http://www.mysite.com/dir/index.html"></iframe> instead of the path relative from the domain root <iframe src="/dir/index.html"></iframe>
• The other issue was the window variable that inputs were bound to needed to be set to the parent window when one was available (which there is in the case of an iframe). This small snippet fixed that

var realWindow = window.parent || window;//.....  //Attach event listeners  realWindow.addEventListener(    "keydown", key.downHandler.bind(key), false  );  realWindow.addEventListener(    "keyup", key.upHandler.bind(key), false  );