同域无iframe代码权限，如何监听其输入框keypress事件并同步内容？

因为是同域环境，我们完全可以直接访问iframe内部的DOM元素，这就好办了！核心思路是在父页面中获取iframe里的输入框元素，给它绑定keypress事件，然后把输入内容同步到父页面的span标签中。不过要注意得等iframe加载完成后再操作，不然可能找不到里面的元素。

下面是具体实现代码：

父页面完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <!-- 父页面的span，用来显示输入内容 -->
  <span id="displayInput"></span>

  <!-- 嵌入的iframe -->
  <iframe id="myIframe" src="iframe页面的URL"></iframe>

  <script>
    $(document).ready(function() {
      // 监听iframe的加载完成事件，确保内部DOM已就绪
      $('#myIframe').on('load', function() {
        // 获取iframe内部的document对象
        const iframeDoc = this.contentDocument || this.contentWindow.document;
        
        // 替换成iframe里实际的输入框选择器，比如#searchInput（如果输入框有ID）
        const inputBox = $(iframeDoc).find('input[type="text"]');
        
        // 绑定keypress事件，同步输入内容到span
        inputBox.on('keypress', function() {
          $('#displayInput').text($(this).val());
        });

        // 额外补充：如果需要覆盖删除、粘贴等所有内容变化场景，添加input事件更全面
        inputBox.on('input', function() {
          $('#displayInput').text($(this).val());
        });
      });
    });
  </script>
</body>
</html>

关键要点说明 #

• 必须确保iframe和父页面同域（协议、域名、端口完全一致），否则浏览器的同源策略会阻止你访问iframe内部的DOM。
• 一定要等待iframe加载完成后再绑定事件，否则find方法找不到目标输入框。用load事件是最可靠的方式。
• 代码中的input[type="text"]是通用选择器，你需要根据iframe里输入框的实际属性修改，比如输入框有专属ID就用#输入框ID，有类名就用.类名。
• 如果发现keypress事件无法覆盖删除、粘贴等操作，补充input事件就能实现完全实时的内容同步，体验更流畅。

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