I have a canvas element in a simple html document with an attached keydown and keyup listener. This works correctly when I load the document in the browser and start pressing the keys. However, if I load the document in an iframe, nothing happens when I press the keys. It seems the key events never enter the iframe or the document inside the iframe. Is there a way to fix this?

I have a canvas element in a simple html document with an attached keydown and keyup listener. This works correctly when I load the document in the browser and start pressing the keys. However, if I load the document in an iframe, nothing happens when I press the keys. It seems the key events never enter the iframe or the document inside the iframe. Is there a way to fix this?

• javascript
• html
• iframe
• dom-events

Share Improve this question Follow edited Mar 15, 2022 at 18:49 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 21, 2011 at 22:17 MariusMarius 59.1k3535 gold badges136136 silver badges151151 bronze badges 2

• What element were you focused on when pressing keys? iFrames can only listen to events in themselves. – Digital Plane Commented Sep 21, 2011 at 22:19
• Code? Example? jsfiddle? – Jared Farrish Commented Sep 21, 2011 at 22:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I found the answer in this question. Setting the focus on the document inside the iframe solves the problem

Setting focus to iframe contents

I found subscribing the event to window.top worked for me, as my game was several iframes deep.