循环提交表单仅最后一次请求生效？iframe接收结果跨域受限求助

嘿，我完全懂你碰到的这个坑——循环里连续提交多个表单到同一个iframe时，浏览器会直接用后面的请求覆盖前面的，所以最后只有参数为9的请求能走完流程。这是因为同一个target的请求如果还在处理中，新的同target请求会中断它，最终只剩最后一个能完成。

问题原因 #

当你给所有表单都设置form.target = "bar"时，浏览器会认为你每次都是要替换这个iframe里的内容。在循环的快速执行下，前面的请求还没来得及发送完成，就被下一个请求给中断了，所以网络面板里只能看到最后一次请求。

解决方案1：给每个请求分配唯一的target（多iframe方案） #

这种方法会给每个请求创建一个独立的iframe，确保每个请求都能完整执行，适合需要保留所有提交结果的场景：

function foo() {
  for (var i = 0; i < 10; i++) {
    console.log(i);
    submitForm(i);
  }
}

function submitForm(page) {
  // 检查是否存在对应target的iframe，不存在则创建
  let iframe = document.getElementById(`bar-${page}`);
  if (!iframe) {
    iframe = document.createElement("iframe");
    iframe.id = `bar-${page}`;
    iframe.name = `bar-${page}`;
    // 可以设置样式，比如隐藏或者固定位置展示
    iframe.style.width = "100%";
    iframe.style.height = "200px";
    iframe.style.border = "1px solid #ccc";
    document.body.appendChild(iframe);
  }

  const form = document.createElement("form");
  form.method = "GET";
  form.action = "http://isup.me";
  form.target = `bar-${page}`; // 使用唯一的target名称
  form.id = `form${page}`;

  const idInput = document.createElement("input");
  idInput.value = page;
  idInput.name = "id";
  form.appendChild(idInput);

  document.body.appendChild(form);
  form.submit();
  // 提交后移除表单，避免DOM冗余
  form.remove();
}

解决方案2：等待上一次请求完成后再提交下一个（单iframe复用方案） #

如果不需要保留所有结果，只想依次在同一个iframe里展示每个提交的结果，可以用异步等待的方式，监听iframe的load事件，确保上一次请求完成后再发送下一个：

async function foo() {
  for (var i = 0; i < 10; i++) {
    console.log(i);
    // 等待当前表单提交完成，再执行下一次循环
    await submitForm(i);
  }
}

function submitForm(page) {
  return new Promise((resolve) => {
    const form = document.createElement("form");
    form.method = "GET";
    form.action = "http://isup.me";
    form.target = "bar";
    form.id = `form${page}`;

    const idInput = document.createElement("input");
    idInput.value = page;
    idInput.name = "id";
    form.appendChild(idInput);

    document.body.appendChild(form);

    // 获取目标iframe，监听它的load事件
    const targetIframe = document.querySelector('iframe[name="bar"]');
    const handleLoad = () => {
      // 移除监听，避免重复触发
      targetIframe.removeEventListener("load", handleLoad);
      // 清理表单
      form.remove();
      // 通知Promise完成，继续下一次循环
      resolve();
    };
    targetIframe.addEventListener("load", handleLoad);

    form.submit();
  });
}

两种方案各有适用场景，你可以根据自己的需求来选~

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