如何在 Angular 7 中使用 iframe答案

【问题标题】：How to use Iframe in angular 7如何在 Angular 7 中使用 iframe
【发布时间】：2020-07-23 00:44:24
【问题描述】：

我正在使用 Iframe 使用以下方法在 HTML 中设置外部 URL：

方法一：

 <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(srcUrl)" height="600" width="1000"></iframe>

方法 2：在这种方法中，我还使用 How to set <iframe src="..."> without causing `unsafe value` exception? 创建了一个安全管道

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

方法三：

 <iframe #iframe height="600" width="1000"></iframe> 
  @ViewChild('iframe') iframe: ElementRef;
ngAfterViewInit() {
    this.iframe.nativeElement.setAttribute('src', this.srcUrl);
}

但是没有一个对我有用。我收到以下错误：

拒绝在框架中显示 ''，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'self'”。

请在以下链接找到我的代码：

https://stackblitz.com/edit/angular-irwasj?file=src%2Fapp%2Fapp.component.html 有人可以帮忙吗？

【问题讨论】：

发布您遇到的错误或创建您的问题的堆栈闪电
您好，我已经用错误消息编辑了我的问题。
我可以获取您尝试访问的示例网址吗？根据此SO post 另一端有设置，您无法在 iframe 中访问该网址，但我们可以尝试其他方式
我正在使用 srcUrl: string = "stackoverflow.com"。还更新了 Stackblitz 链接。
如上述帖子中所述，由于CORS 政策，您无法执行获取和使用为 html 的其他替代方法也将失败

标签： angular

【解决方案1】：

我正在研究这个。很少有网站像 google、stackoverflow、youtube 拒绝在 iframe 中加载。它使用某种 FrameKiller。如果您使用https://www.google.com，它将显示 google.com 拒绝连接。像 stackoverflow 这样的其他网站根本不显示任何消息。我为此创建了一个演示，它使用https 加载其他一些随机站点。

演示：https://stackblitz.com/edit/angular-gzvckb

【讨论】：

如果它回答了您的问题，请接受。快乐编码:)