Angular 2中如何通过HTML文本渲染Iframe？

问题 #

想要在iframe内渲染静态HTML文档，尝试了以下代码：

content = this.sanitizer.bypassSecurityTrustHtml(`<iframe>${x.html}</iframe>`)

<mat-dialog-content [innerHTML]="content"></mat-dialog-content>

但Angular无法正常识别，HTML内容会以文本形式显示在iframe标签之后。

补充待渲染的HTML内容：

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol{margin:0;padding:0}table td,table th{padding:0}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c2{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:center}.c0{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c1{font-weight:700}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c0 doc-content"><p class="c2"><span>Bla </span><span class="c1">bla</span><span class="c3">&nbsp;bla</span></p></body></html>

问题效果截图

解决方案 #

问题根源在于直接将HTML内容嵌套进iframe标签内部，Angular的innerHTML会把iframe内部的HTML解析为文本节点，而非iframe的文档内容。正确做法是先渲染iframe元素，再通过DOM操作设置其内容。

步骤1：模板中直接添加iframe标签 #

修改模板，直接渲染iframe并绑定模板引用变量：

<mat-dialog-content>
  <iframe #htmlFrame width="100%" height="100%"></iframe>
</mat-dialog-content>

步骤2：组件中获取iframe并设置内容 #

在组件类中，通过@ViewChild获取iframe元素，再通过两种方式设置内容：

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourDialogComponent implements OnInit {
  @ViewChild('htmlFrame') htmlFrame!: ElementRef<HTMLIFrameElement>;
  htmlContent = '<html>...</html>'; // 替换为你的静态HTML内容

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    const iframe = this.htmlFrame.nativeElement;
    
    // 方式1：使用srcdoc属性（需通过安全信任）
    iframe.srcdoc = this.sanitizer.bypassSecurityTrustHtml(this.htmlContent) as string;

    // 方式2：直接写入iframe文档（无需额外安全处理，但要确保内容可信）
    // const doc = iframe.contentDocument || iframe.contentWindow?.document;
    // if (doc) {
    //   doc.open();
    //   doc.write(this.htmlContent);
    //   doc.close();
    // }
  }
}

关键说明 #

• 不要用innerHTML嵌套iframe与内容，iframe的内容必须通过自身的srcdoc属性或内部文档操作来设置，这是iframe的标准使用方式。
• 使用srcdoc时，必须通过DomSanitizer信任HTML内容，避免Angular安全机制拦截。
• 直接写入iframe文档的方式无需安全处理，但要确保HTML内容可信，防范XSS风险。

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