Angular2中动态加载iframe失效问题求助

嘿，我来帮你搞定这个问题！你遇到的情况其实是Angular的安全机制在起作用——直接用[src]绑定未处理的动态URL会被Angular的XSS防护拦截，但{{iFrameSrc}}只是文本渲染，不会触发安全检查，所以能正常显示地址，却没法加载iframe内容。

下面是具体的解决步骤：

1. 引入必要的依赖 #

首先在你的app.component.ts里导入Angular的安全处理工具：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

2. 注入DomSanitizer #

在组件的构造函数中注入DomSanitizer，用来处理安全URL：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  iFrameSrc: string; // 你的动态URL变量
  safeIFrameSrc: SafeResourceUrl; // 处理后的安全URL

  constructor(private sanitizer: DomSanitizer) { }

3. 处理动态URL为安全资源 #

在ngOnInit（或者你获取动态URL的地方），把原始URL转换成Angular认可的安全资源URL：

ngOnInit() {
  // 这里替换成你实际的动态URL获取逻辑，比如从接口、变量等
  this.iFrameSrc = '你的动态地址';
  // 标记URL为安全的资源地址
  this.safeIFrameSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.iFrameSrc);
}

4. 在模板中绑定安全URL #

最后修改你的模板代码，绑定处理后的safeIFrameSrc：

<!-- 依然可以保留地址显示 -->
<p> iframe地址：{{iFrameSrc}} </p>

<!-- 现在这个iframe可以正常加载了 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" [src]="safeIFrameSrc"></iframe>
</div>

为什么要这么做？ #

Angular默认会对所有绑定到资源属性（比如iframe的src、img的src等）的URL进行安全校验，防止恶意脚本注入。只有通过DomSanitizer标记为安全的URL，Angular才会允许加载对应的资源。

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