如何在表单提交函数中延迟执行window.open页面跳转？

直接调用form.submit()会触发页面刷新/跳转，导致后续的setTimeout代码根本没机会执行，这是你之前修改无效的核心原因。要实现需求，必须避免表单提交刷新当前页面，让后续代码能正常运行，以下两种方案可选：

方案一：异步提交表单（推荐） #

用fetch异步提交表单，不会刷新页面，同时等待两个表单都提交完成后再执行延迟跳转：

// 辅助函数：异步提交单个表单
function submitFormAsync(form) {
  return new Promise((resolve, reject) => {
    const formData = new FormData(form);
    fetch(form.action, {
      method: form.method || 'POST',
      body: formData
    })
    .then(response => response.ok ? resolve() : reject(new Error('提交失败')))
    .catch(reject);
  });
}

// 修改后的SubmitBoth函数
function SubmitBoth() {
  Promise.all([
    submitFormAsync(document.frm1),
    submitFormAsync(document.frm2)
  ])
  .then(() => {
    // 双表单提交完成后，等待3秒跳转
    setTimeout(() => {
      window.location.href = 'http://example.com';
    }, 3000);
  })
  .catch(err => console.error('表单提交出错:', err));
}

方案二：用隐藏iframe避免页面刷新 #

如果必须保留表单的同步提交逻辑（比如涉及文件上传等场景），可以把表单提交到隐藏iframe，避免刷新当前页面：

首先在页面添加隐藏iframe：

<iframe id="hiddenSubmitFrame" name="hiddenSubmitFrame" style="display: none;"></iframe>

然后修改函数：

function SubmitBoth() {
  // 将两个表单的提交目标设为隐藏iframe
  document.frm1.target = 'hiddenSubmitFrame';
  document.frm2.target = 'hiddenSubmitFrame';

  // 监听iframe加载完成事件（表单提交完成后触发）
  document.getElementById('hiddenSubmitFrame').onload = function() {
    setTimeout(() => {
      window.location.href = 'http://example.com';
    }, 3000);
  };

  // 依次提交表单
  document.frm1.submit();
  document.frm2.submit();
}

关键说明 #

• 两种方案的核心都是避免表单提交刷新当前页面，确保setTimeout代码能被执行。
• 用window.location.href替代window.open('_self')，实现相同的当前窗口跳转效果，写法更直观。

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