如何在Angular2中将组件的html设置为iframe答案

【问题标题】：How to set a component's html to iframe in Angular2如何在Angular2中将组件的html设置为iframe
【发布时间】：2018-04-09 22:05:16
【问题描述】：

我有一个项目，我必须在一个页面中使用相同的组件两次，但组件没有为此授予权限，所以我想将它与 iframe 一起使用，但我找不到如何将 iframe src 设置为字符串 html .我可以将 html 与 div 绑定，但我无法使用 iframe 执行此操作

这是我的翻译管道：

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

我的html页面：

<div [innerHTML] = "template | safe"></div>

我可以用这个方法，但我需要一个单独的页面，所以

<iframe [src] = "template | safe"></iframe>

我需要用 iframe 来做。

这是我的 Typescript 文件：

template: SafeHtml;
constructor() {
        this.template = '<button class="btn btn-lg btn-success">...</button>';
    }

【问题讨论】：

我认为你最好解决组件的任何问题，阻止你重新使用它，而不是尝试用 iframe 解决这个问题。
是的，你是对的，它比这更好，但我没有时间，这种方法也可以提高我的知识，因为我认识到在这种情况下我无法将 html 绑定到 iframe，这可能是必要的现在:)

标签： javascript html dom iframe angular5

【解决方案1】：

我完全不相信您尝试做的是一个好主意。几乎可以肯定的是，纠正组件中阻止您重复使用它的任何内容会更容易和更快......

...但是也就是说，如果您想（有效地）设置 iframe 的 innerHTML，您可以使用 HTML5 srcdoc 属性而不是 src（需要一个 URL）：

<iframe [srcdoc] = "template | safe"></iframe>

srcdoc 在 IE 或 Edge 中是 not currently supported。 polyfill 确实存在，但我不知道它与 Angular 的交互效果如何。

（但请注意，iframe 仍然运行自己独立的 js 上下文。iframe 组件与应用程序的其余部分之间的任何通信都需要通过 postMessage 处理，而不是普通的 angular 方法——除非有问题的组件是实例化后基本上是静态的，这可能使该策略无法启动。）

顺便说一句，您错误地命名了该管道转换。它与“安全”相反，因为它的存在只是为了绕过输入清理程序并使您容易受到 XSS 攻击。

【讨论】：