表单提交后结果同时在新窗口和目标iframe打开，如何仅在iframe显示？

问题原因 #

你遇到的情况是表单被触发了两次提交：一次是表单的默认提交行为（比如点击提交按钮触发，此时可能未设置target，所以打开新窗口），另一次是你手动调用的submit()方法（设置了target到iframe），导致两个窗口同时出现。而用event.preventDefault()后iframe空白，是因为手动提交时的逻辑没有正确绑定到当前表单实例。

解决方案 #

步骤1：确认目标iframe存在 #

首先确保页面里有名称为frameName的iframe，否则浏览器会因为找不到目标而新开窗口：

<iframe name="frameName"></iframe>

步骤2：调整提交逻辑（二选一即可） #

方法一：利用默认提交自动生效

直接在表单的提交事件中设置action和target，无需阻止默认行为，默认提交会自动使用你设置的target：

document.forms[0].addEventListener("submit", function(event) {
    // 替换成你的实际接口地址
    this.action = "<你的提交地址>";
    this.target = "frameName";
});

方法二：阻止默认后手动提交

如果需要明确阻止默认行为，确保用当前表单实例调用submit()，避免重复获取表单元素：

document.forms[0].addEventListener("submit", function(event) {
    event.preventDefault();
    this.action = "<你的提交地址>";
    this.target = "frameName";
    this.submit();
});

注意事项 #

• 不要在事件监听外部再手动调用document.forms[0].submit()，否则会再次触发提交，导致重复打开窗口。
• 确认表单的method属性（GET/POST）和后端接口匹配，避免因请求方式错误导致iframe空白。

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