如何在 iframe 中显示带有外部样式表的 html 文档？ Angular Html CSS

Question

我的应用程序前端使用Angular。

我正在尝试显示 html 文档（在我的例子中是使用用户输入数据生成的文档的预览）。我可以成功地将文档中的 Html 和内联 CSS 显示到 iframe。但是我找不到将外部样式 sheet 包含到同一个 iframe 的方法。

我可以在 angular 文件中使用任何方法将外部 CSS 文件与我已成功传递到 iframe 的 html 集成。

我目前正在使用

<iframe [srcdoc] = "mypreview" ></iframe>

"mypreviw" 是我从后端

带来的html 字符串

我还使用了 DOM 消毒剂来消毒 html 字符串。我可以用类似的方法引入 Styles 字符串。但是请让我知道是否有任何方法可以将这两个字符串集成到 iframe 中。

除 iframe 之外或与 iframe 类似的任何解决方案都可以。我需要我的文档的良好预览，就是这样

谢谢。

Answer 1

您可以使用 domsanitizer 外部资源。

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

@Component({
  selector: 'yourapp',
  templateUrl: './yourapp.component.html',
  styleUrls: ['./yourapp.component.scss']
})

export class YourApp implements OnInit {
  @Input()
  url: string = "https://www.example.com";
  mypreview: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.mypreview= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

在 dom 清理后，您可以在 iframe

中使用该变量

<iframe width="100%" height="100%" frameBorder="0" [src]="mypreview"></iframe>

如果你想在 iframe 中显示 html 你可以试试这个

<div [innerHTML]="mypreview"></div>

inside that bypassSecurityTrustHtml will help

this.mypreview= this.sanitizer.bypassSecurityTrustHtml(
      '<iframe width="100%" height="800" src="https://primefaces.org/primeng/#/"></iframe>',
    );

如何在 iframe 中显示带有外部样式表的 html 文档？ Angular Html CSS

How to display a html document with external stylesheet in iframe? Angular Html CSS

html

css

iframe

angular

angular-dom-sanitizer