Jump to content

Capturing keyboard input within an iframe


Recommended Posts

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.




Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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  );
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...