父页面与iframe表单元素合并提交失败，求排查代码问题

我先给你梳理下代码里的几个关键问题，一个个来修正，就能解决合并提交的问题了：

1. 最致命的ID混淆问题 #

你在iframe的input标签上写了id="myIframe"，但父页面里的<iframe>标签根本没加id！父页面的document.getElementById('myIframe')其实找到的是iframe里的那个输入框，不是iframe本身，这直接导致你拿不到iframe的contentWindow，后续操作全错了。

修正： 给父页面的iframe标签加上id（比如id="myIframe"），同时把iframe里input的id删掉（或者改成别的，比如id="iframeInput"）。

2. 提交事件的触发逻辑混乱 #

• 父页面的<input type="image">是提交按钮，它的事件应该用onclick而不是onsubmit，而且父表单本身的onsubmit="this.submit();return false;"会和你的自定义函数冲突，直接去掉这个属性。
• 你的submitBothForms函数里，直接把iframe的input移到父表单里，会导致iframe里的输入框消失，其实应该复制元素而不是移动，或者收集值后构造新的input元素。

3. iframe里的冗余错误代码 #

iframe里的脚本一加载就执行iframedoc.getElementsByTagName('form')[0].submit();，这会导致页面刚打开就自动提交iframe的表单，完全没必要，直接删掉这段脚本。

修正后的完整代码 #

父页面代码

<body>
  <form action="mailto:johndoe@anywhere.com?subject=Test" id="form1" method="post" enctype="text/plain">
    Parent Entry:<input type="text" size="25" name="Parent Entry">
    <br>
    <!-- 给iframe加上id="myIframe" -->
    <iframe src="testiframe.htm" width="auto" height="44px" frameborder="0" id="myIframe"></iframe>
    <br>
    <!-- 把onsubmit改成onclick，触发自定义函数 -->
    <input type="image" src="email.gif" border="0" width="200" onclick="return submitBothForms();">
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function submitBothForms() {
      // 先正确获取iframe的文档对象
      const iframe = document.getElementById('myIframe');
      const iframeDoc = iframe.contentWindow.document;

      // 获取iframe里的所有带name的输入元素
      const iframeInputs = iframeDoc.querySelectorAll('input[name]');
      
      // 复制iframe的输入元素，添加到父表单（避免移走原元素）
      iframeInputs.forEach(input => {
        const clonedInput = input.cloneNode(true);
        document.getElementById('form1').appendChild(clonedInput);
      });

      // 提交父表单
      document.getElementById('form1').submit();
      // 返回false阻止默认的图片提交行为
      return false;
    }
  </script>
</body>

iframe页面代码（testiframe.htm）

<body>
  <!-- 这里可以保留表单，但不需要action和提交按钮，提交逻辑交给父页面 -->
  <form id="form2">
    iFrame Entry: <input type="text" size="20" name="iFrame Entry" value="" id="iframeInput" />
    <br><br>
    <!-- 去掉iframe里的提交按钮，避免混淆 -->
  </form>
</body>

额外说明 #

1. 同源问题： 要确保父页面和iframe页面在同一个域名下（本地测试的话file://协议也算同源），不然浏览器会阻止跨DOM操作，这是浏览器的安全限制，没法绕开。
2. mailto的局限性： 用mailto:提交表单依赖用户本地的邮件客户端，而且不同客户端对enctype="text/plain"的解析可能有差异。如果是生产环境，更推荐用后端接口来处理表单提交，稳定性会高很多。
3. 如果你不想复制iframe的元素，也可以直接收集所有输入框的name和value，拼到mailto的参数里，比如通过FormData合并后转成字符串，适合不想修改DOM的场景。

内容来源于stack exchange