如何在JavaScript中拦截一个iframe的键盘事件并转发至另一个iframe

针对你遇到的两个核心问题，这里给出具体的解决思路和代码：

一、解决iframe2聚焦时宿主监听不到keydown事件的问题 #

当焦点落在iframe内部时，键盘事件会被iframe自身的上下文捕获，不会冒泡到宿主页面。根据iframe2和宿主是否同源，有两种处理方式：

1. 同源场景（iframe2域名与宿主一致） #

直接在宿主页面中给iframe2的contentWindow绑定键盘事件：

const iframe2 = document.getElementById('iframe2');
iframe2.contentWindow.addEventListener('keydown', (event) => {
  if (event.code === 'NumpadAdd') {
    triggerIframe1Shortcut();
  }
});

2. 跨域场景（iframe2域名与宿主不同） #

跨域下宿主无法直接访问iframe2的内部上下文，需要在iframe2的代码中主动监听键盘事件，并通过postMessage把事件信息发送给宿主：

// 这段代码要放在iframe2的页面中
window.addEventListener('keydown', (event) => {
  if (event.code === 'NumpadAdd') {
    // 生产环境请把*替换为宿主的具体域名，避免安全风险
    window.parent.postMessage({ type: 'NumpadAddPressed' }, '*');
  }
});

然后在宿主页面监听message事件，接收iframe2发来的信号：

window.addEventListener('message', (event) => {
  // 生产环境一定要验证event.origin，只处理可信域名的消息
  // if (event.origin !== 'https://你的宿主域名.com') return;
  if (event.data.type === 'NumpadAddPressed') {
    triggerIframe1Shortcut();
  }
});

二、解决跨域下向iframe1 dispatchEvent的CORS错误 #

同源策略禁止跨域直接调用iframe的contentWindow.dispatchEvent，正确的做法是通过postMessage通知iframe1，让它自行触发对应的键盘事件：

1. 在iframe1的页面中添加消息监听 #

// 先保留你原有的快捷键监听逻辑
window.addEventListener('keydown', (event) => {
  if (event.code === 'NumpadAdd') {
    // 你的原有快捷键处理逻辑
    console.log('iframe1的+键快捷键触发');
  }
});

// 添加消息监听，接收宿主的触发指令
window.addEventListener('message', (event) => {
  // 生产环境验证消息来源的合法性
  // if (event.origin !== 'https://你的宿主域名.com') return;
  if (event.data.type === 'TriggerNumpadAdd') {
    // 模拟真实的keydown事件并触发
    const keydownEvent = new KeyboardEvent('keydown', {
      code: 'NumpadAdd',
      key: '+',
      keyCode: 107,
      which: 107,
      bubbles: true,
      cancelable: true
    });
    window.dispatchEvent(keydownEvent);
  }
});

2. 在宿主页面实现触发函数 #

function triggerIframe1Shortcut() {
  const iframe1 = document.getElementById('iframe1');
  // 生产环境替换为iframe1的具体域名
  iframe1.contentWindow.postMessage({ type: 'TriggerNumpadAdd' }, '*');
}

完整代码整合 #

宿主页面 #

<body>
  <div id="iframes">
    <iframe id="iframe1" src="https://example1.com"></iframe>
    <iframe id="iframe2" src="https://example2.com"></iframe>
  </div>
  <script>
    // 处理跨域iframe2的消息
    window.addEventListener('message', (event) => {
      if (event.data.type === 'NumpadAddPressed') {
        triggerIframe1Shortcut();
      }
    });

    // 如果是同源iframe2，取消下面的注释并使用
    // const iframe2 = document.getElementById('iframe2');
    // iframe2.contentWindow.addEventListener('keydown', (event) => {
    //   if (event.code === 'NumpadAdd') {
    //     triggerIframe1Shortcut();
    //   }
    // });

    function triggerIframe1Shortcut() {
      const iframe1 = document.getElementById('iframe1');
      iframe1.contentWindow.postMessage({ type: 'TriggerNumpadAdd' }, '*');
    }
  </script>
</body>

重要安全提示 #

• 所有postMessage调用中，一定要把目标域名从*替换为具体的可信域名，防止恶意页面冒充消息来源。
• 接收message事件时，必须验证event.origin的合法性，只处理来自可信域名的消息。

内容的提问来源于stack exchange，提问作者Curtis