angular2自定义模态组件iframe问题

Question

• 我已经在 angular2 中编写了自定义模态组件。在模态中，我将第三方 html 作为 iframe 打开。我将有 1 或 2 个按钮来打开模式（内部 iframe）。仅当我有 2 个按钮时才面临问题。
• 在第一个按钮上单击 iframe 启动没有任何问题。 Onclick 的第二个按钮第三方 url 链接被调用两次 & 失败。
• 由于安全原因，不允许对第 3 方 html 进行第二次调用，因为在我的情况下，请求是第二次进行，因此无法加载内容。
• 有时即使 iframe 链接被调用一次，它仍然会失败。所以没有得到什么是实际问题。
• 根据分析，这可能是由于缓存问题。如何停止 iframe 中的缓存。或者欢迎任何建议。

在模态中有以下代码

<iframe [src]="third/party/url.html"></iframe>

Answer 1

在 angular2+ 中，出于安全原因，您必须对此进行检查，

在html中

 <iframe class="e2e-iframe-untrusted-src" [src]="url"></iframe>

在.ts文件中

constructor(private sanitizer: DomSanitizer) { }

url=this.sanitizer.bypassSecurityTrustResourceUrl(res.data.url);

Answer 2

对于 RC.6^ 版本使用 DomSanitizer

一个不错的选择是为此使用纯管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

html

<iframe width="100%" height="300" [src]="url | safe"></iframe>

对于RC.5

您可以像这样利用DomSanitizationService：

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

然后绑定到模板中的url：

<iframe width="100%" height="300" [src]="url"></iframe>

不要忘记添加以下导入：

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';