表单 - 向多个 iframe 提交 POST 请求

【问题标题】：Form - submit POST request to multiple iframes表单 - 向多个 iframe 提交 POST 请求
【发布时间】：2016-03-21 10:23:26
【问题描述】：

我知道使用target 属性可以submit POST request to an iframe。

有没有办法同时从一个表单向多个 iframe 提交 POST 请求？

HTML 和 JS 解决方案都可以接受。

【问题讨论】：

只是好奇，但你为什么要这么做？
@NickZ 好问题！我有两个 iframe 的标记，一个显示用于具有大视口 > 1000px 的设备，另一个显示用于移动设备。两个 iframe 应具有相同的来源，但样式和定位不同。
那么您是否愿意将表单提交到这些 iframe 之一？哪个在使用？还是我误解了什么
@NickZ 我正在使用Bootstrap，我的项目是响应式的。通过调整浏览器大小，您可以看到一个或另一个版本，因此两个 iframe 都应包含实际响应。

标签： javascript html forms iframe form-submit

【解决方案1】：

Javascript 解决方案是您的最佳选择。

<form id="form">
  <input type="text" name="xyz" value="random data" />
  <button type="submit">Go</button>
</form>

在 JS 中，您可以在表单提交时附加一个事件监听器。侦听器会触发一个可以将表单数据发送到多个目标的函数：

var form = document.getElementById("form");

if(form.attachEvent) {
  form.attachEvent("submit", submitForm);

} else {
  form.addEventListener("submit", submitForm);
}

function submitForm(e) {
  if(e.preventDefault) {
    e.preventDefault();
  }

  this.target = "first_iframe";
  this.submit();

  var secondForm = this.cloneNode();
  secondForm.target = "second_iframe";
  secondForm.submit();
}

【讨论】：

对不起，我的回答延迟了，但这个解决方案不起作用，proof
没问题。我已经编辑了 submitForm 函数并在您发送的链接上对其进行了测试。现在可以了。