Angular动态表单跳转新窗口而非指定iframe问题求助

核心原因 #

Angular里用[name]绑定iframe的name时，实际操作的是DOM元素的property，但浏览器匹配form的target属性时，是依据DOM元素的attribute层面的name。两者不同步就会导致表单找不到目标iframe，最终默认在新窗口打开内容。

解决方案 #

1. 改用attribute绑定iframe的name #

把iframe的[name]替换成[attr.name]，确保DOM上的name属性被正确设置：

<form method="post" action="http://localhost/blah" [target]="toIFrame">
  <input ... />
  <input ... />
</form>
<iframe [attr.name]="toIFrame" [id]="toIFrame"></iframe>

2. 提前初始化目标名称变量 #

保证toIFrame变量在组件初始化阶段就完成赋值，避免表单渲染时变量为空：

export class YourComponent {
  toIFrame: string;

  ngOnInit() {
    // 可以动态生成唯一名称，也可以直接指定固定值
    this.toIFrame = 'form-target-frame-' + Date.now();
  }
}

额外注意事项 #

• 确保iframe在表单提交前已经存在于DOM中，不要延迟创建；
• 如果涉及跨域请求，需确认目标服务器允许跨域加载（否则iframe会正常加载，但不会触发新窗口）；
• 尽量避免将iframe设置为display: none，部分浏览器对隐藏iframe的target匹配可能存在异常。

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