如何获取iframe内的按键输入并同步到外部输入框

跨域场景下受浏览器同源策略限制，父页无法直接访问iframe内部的DOM和事件对象，不存在单方面绕过该限制的纯JS方案，必须父子页两端配合实现，具体方案如下：

实现核心逻辑 #

• 利用浏览器原生postMessageAPI完成跨域父子页的安全消息通信
• 优先使用input事件监听输入行为，覆盖键盘输入、粘贴、中文输入法选词、删除等全场景，避免keypress事件的兼容性和场景覆盖问题

父页（包含iframe的外部页面）代码 #

<input type="text" name="test" id="outerInput" value="$here should go what the user is typing"/>
<iframe src="https://你的跨域iframe地址" id="crossIframe"></iframe>
<script>
// 监听iframe发送的输入消息
window.addEventListener('message', function(e) {
  // 安全校验：仅接收指定iframe源的消息，防止恶意注入
  if (e.origin !== 'https://你的跨域iframe实际源地址') return;
  // 同步内容到外部输入框
  document.getElementById('outerInput').value = e.data;
}, false);
</script>

iframe内嵌页（跨域引入的目标页面）代码 #

如果没有iframe内嵌页的代码修改权限，该需求无法实现。

<!-- 此处为iframe内部的输入表单字段，替换为你实际的表单元素ID -->
<input type="text" id="innerInput" />
<script>
const innerInput = document.getElementById('innerInput');
// 监听内部输入行为，实时发送内容到父页
innerInput.addEventListener('input', function() {
  // 第二个参数填写父页的实际源地址，限制消息接收对象保证安全
  window.parent.postMessage(this.value, 'https://你的父页实际源地址');
});
</script>

同域iframe简化方案 #

如果是同域iframe，不需要修改iframe内部代码，直接在父页绑定事件即可：

const iframe = document.getElementById('crossIframe');
iframe.onload = function() {
  const innerInput = iframe.contentDocument.getElementById('innerInput');
  innerInput.addEventListener('input', function() {
    document.getElementById('outerInput').value = this.value;
  });
}

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