Angular2 iframe 不工作

Question

我正在尝试在 Angular2 上加载 iFrame。但是地址是动态加载的。

实时代码是：https://angular-fgzjog.stackblitz.io

在 app.coponent.ts 内

<!-- this works -->
    <p>
     iframe address  : {{iFrameSrc}} 
    </p>

<!--- this does not work -->
    <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" [src]="iFrameSrc"></iframe> 
                  </div>

Answer 1

Angular 正在清理您尝试放入 iframe src 的任何内容，以防止不安全的内容。因此你必须清理你的 url 以告诉 Angular 你是故意添加这个 url 并且它是安全的！

https://angular.io/api/platform-browser/DomSanitizer

所以要么将此逻辑添加到您的组件并调用：

constructor(
 private domSanitizer: DomSanitizer, 
 // ...
) // ...

this.safeiFrameSrc = this.domSanitizer.bypassSecurityTrustUrl(this.iFrameSrc)


<!-- template binding: -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" [src]="safeiFrameSrc"></iframe> 
</div>

或者你也可以创建一个管道：

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}

  transform(value: string, type: string = 'url'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
  }
}

<!-- usage: -->

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" [src]="iFrameSrc | safe"></iframe> 
</div>    

这应该可以解决问题！