如何强制iframe内的提交按钮跳转结果在父窗口打开

失效原因 #

首次提交正常、二次提交失效的核心原因是：第一次提交后页面动态渲染生成的第二个表单，没有继承你提前设置的base标签target属性，或是表单的提交逻辑被JS接管后，原生target配置被覆盖。

可行修复方案 #

你可以任选以下一种方式实现全场景生效：

• 原生JS全局监听方案（兼容性最好，无框架依赖）
  在iframe页面的任意JS位置加入以下代码，通过事件捕获机制监听所有静态、动态生成的表单提交事件，强制指定提交目标为父窗口：

  document.addEventListener('submit', function(e) {
    if (e.target.tagName === 'FORM') {
      e.target.target = '_parent';
    }
  }, true);
  

• jQuery绑定方案（适用于已引入jQuery的项目）

  $(document).on('submit', 'form', function() {
    $(this).attr('target', '_parent');
  });
  

• 手动提交场景修复
  如果你的表单是通过JS手动调用submit()方法触发提交，在提交代码前补充target赋值即可：

  // 示例逻辑
  const submitBtn = document.querySelector('#submit-btn');
  submitBtn.addEventListener('click', function() {
    const form = document.querySelector('#second-form');
    form.target = '_parent'; // 补充这行即可
    form.submit();
  });
  

补充说明：上述方案不需要修改现有base标签、原有表单的静态属性，也不会影响页面其他功能逻辑。如果页面配置了内容安全策略禁止内联JS，将代码放入外部引入的JS文件中即可生效。

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