Chrome Mobile 63.0.3239点击按钮后链接跳转至表单action地址问题求助

我之前碰到过几乎一模一样的Chrome移动端特定版本bug，这个问题大概率是Chrome 63.x版本在处理表单提交到iframe时，没有正确重置主页面的导航状态或者历史记录栈导致的。以下是几个经过验证的解决方法：

方法1：手动控制表单提交并重置状态 #

把表单的提交按钮改成普通按钮（而非type="submit"），通过JS手动触发提交，并在提交后重置表单的target属性，避免影响后续页面交互：

<!-- 把submit按钮改成button -->
<button id="submitBtn">提交</button>
<iframe name="formIframe" style="display:none;"></iframe>
<form id="myForm" action="save_to_db.php" method="POST">
  <!-- 表单字段 -->
</form>

document.getElementById('submitBtn').addEventListener('click', function(e) {
  const form = document.getElementById('myForm');
  // 执行你的表单校验逻辑
  if (!validateForm()) {
    return;
  }
  
  // 手动设置target并提交表单到iframe
  form.target = 'formIframe';
  form.submit();
  
  // 提交后延迟重置target，防止后续交互被错误关联
  setTimeout(() => {
    form.target = '_self';
  }, 100);
});

方法2：修复iframe加载后的历史记录 #

Chrome 63这个版本的bug会导致表单提交到iframe后，主页面的历史记录被意外替换成表单的action地址。我们可以在iframe的onload事件里，用history.replaceState修正历史记录：

document.querySelector('iframe[name="formIframe"]').addEventListener('load', function() {
  // 将当前页面的历史记录重置为当前URL，避免后续跳转错误
  window.history.replaceState(null, document.title, window.location.href);
});

方法3：替换为AJAX提交（最彻底的方案） #

如果可以调整后端逻辑，完全放弃iframe提交，改用AJAX（fetch/XMLHttpRequest）提交表单数据，这样能彻底避免iframe带来的浏览器状态兼容性问题：

document.getElementById('submitBtn').addEventListener('click', async function(e) {
  e.preventDefault();
  const form = document.getElementById('myForm');
  
  if (!validateForm()) {
    return;
  }
  
  const formData = new FormData(form);
  try {
    const response = await fetch('save_to_db.php', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      // 调用你的页面状态更新函数
      updatePageStatus();
    } else {
      console.error('提交失败');
    }
  } catch (err) {
    console.error('网络错误:', err);
  }
});

为什么会出现这个问题？ #

Chrome Mobile 63是2018年发布的旧版本，当时Chrome对表单提交到隐藏iframe的处理逻辑存在bug——它没有正确隔离iframe的提交行为和主页面的导航上下文，导致主页面的历史记录或导航状态被意外篡改，后续点击任何链接时，浏览器错误地跳转到了表单的action地址。

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