嵌入的iframe 鼠标点击iframe后事件无响应

随心，随行

于 2024-07-08 15:34:48 发布

阅读量481

点赞数 10

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44588893/article/details/140269998

版权

发生条件

页面中嵌入 iframe 标签,当我们给页面添加了事件之后,鼠标点击到 ifarme 上,事件会失效

这里以全屏 iframe esc 退出为例

点击按钮可以正常显示操作，esc 可以退出全屏，当鼠标点到iframe 上再安esc 退出全屏就不行了。

直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 100%;
        height: 100vh;
      }
      iframe {
        width: 100%;
        height: 100%;
        background: #969696;
      }
      #iframe-box {
        width: 60%;
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div id="iframe-box">
      <iframe src=" " frameborder="0" id="iframe-dom"></iframe>
      <button onclick="fullScreen()">fullScreen</button>
    </div>

    <script>
      let iframe = null;
      iframe = document.getElementById("iframe-box");
      let isFull = false;
      function fullScreen() {
        // 全屏
        if (isFull) {
          iframe.style.width = "auto";
          iframe.style.height = "auto";
        } else {
          iframe.style.width = "100vw";
          iframe.style.height = "100vh";
        }
        isFull = !isFull;
      }

         // 关键代码 给 iframe 添加事件监听
        iframe = document.getElementById("iframe-dom");
        let doc = iframe.contentWindow || iframe.contentDocument;
        doc.onkeydown = function (e) {
            if (e.keyCode == 27 && isFull) {
                fullScreen();
            }
        };
        // 
      window.onkeydown = function (e) {
        if (e.keyCode == 27 && isFull) {
          console.log(e);
          fullScreen();
        }
      };
    </script>
  </body>
</html>

当全屏后操作了 iframe 后按 esc 会无响应,浏览器全局对象已经改变位 iframe 的了,所以需要给 iframe 添加键盘事件监听

let iframe = document.getElementById("iframe-dom");
let doc = iframe.contentWindow || iframe.contentDocument;
doc.onkeydown = function (e) {
  if (e.keyCode == 27 && isFull) {
    fullScreen();
  }
};