当前位置: > > > JS - 页面通过 iframe 加载后无法响应键盘事件的问题解决(keydown失效)

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>
评论0