JS - 页面通过 iframe 加载后无法响应键盘事件的问题解决（keydown失效）

2018-03-03 发布：hangge 阅读：1911

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>