JS - 页面通过 iframe 加载后无法响应键盘事件的问题解决(keydown失效)
1,问题描述
(1)假设我有如下一个页面(child.html)。该页面会通过 js 监听键盘按下事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e) { alert("按键code为:" + e.keyCode); } } </script> </head> <body> 我是一个子页面 </body> </html>
(2)单独访问这个页面可以看到键盘事件响应是正常的。

(3)而如果这个页面是经由另一个页面通过 iframe 引入进来的话,默认打开后是捕获不到键盘事件的(要点击一下子页面才行)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <iframe id="iframe1" src="child.html" width="100%" height="100%" frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'> </iframe> </body> </html>
2,解决办法
只要让 iframe 加载完毕后自动获取焦点即可。这样就能保证网页打开后,iframe 可以接受键盘事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <iframe id="iframe1" src="child.html" width="100%" height="100%" frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true' onload="iframe1.focus()"> </iframe> </body> </html>