表单提交时如何根据输入内容控制iframe重定向到不同页面

问题根源 #

现有代码核心问题是submit按钮点击事件和表单submit事件逻辑冲突，同时匹配字母开头的输入时仅修改了form.action，但你设置了return false阻止了表单提交，自然不会触发iframe加载。

核心修改点 #

• 移除原代码中window.onload里绑定的submit按钮单独点击事件，所有提交逻辑统一放到setAction函数，避免事件执行顺序混乱
• 匹配到字母开头输入时，直接操作iframe的src属性实现加载，不再修改form.action
• 优化变量命名，避免重复获取DOM元素

完整修正代码 #

JavaScript部分 #

function setAction(form) {
  const oidVal = document.getElementById("oid").value.trim();
  const lettersReg = /^flow/i;
  const numbersReg = /^[0-9]/i;
  const myIframe = document.getElementById("myiFrame");

  if (oidVal.match(lettersReg)) {
    // 匹配到flow开头的字母输入，修改iframe地址加载对应页面
    const targetUrl = "https://flowpl.com/test-page/";
    myIframe.src = targetUrl;
  } else if (oidVal.match(numbersReg)) {
    // 保留原有数字输入时顶层页面跳转的逻辑
    const trackUrl = "https://tracker.flowpl.com/track_customer_orders";
    window.location.href = `${trackUrl}?refNum=${oidVal}&lang=english`;
  }
  // 阻止表单默认提交行为，避免页面刷新
  return false;
}

HTML部分 #

<div class="container-wrap">
  <div class="container main-content">
    <div class="row">
      <form name="test" method="POST" onsubmit="return setAction(this)">
        <input type="text" name="oid" id="oid" value="" required>
        <input type="submit" name="submit" value="submit">
      </form>
      <iframe style="border:0px #ffffff none;" name="myiFrame" id="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="1200px" allowfullscreen></iframe>
    </div>
  </div>
</div>

注意事项 #

如果需要修改字母输入对应的iframe加载地址，直接替换上述代码中https://flowpl.com/test-page/即可。如果目标页面设置了X-Frame-Options安全规则禁止iframe嵌入，会出现加载失败的情况，这是目标网站的安全限制，无法通过前端代码绕过。

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