如何在 iframe 中显示带有外部样式表的 html 文档? Angular Html CSS
How to display a html document with external stylesheet in iframe? Angular Html CSS
我的应用程序前端使用Angular。
我正在尝试显示 html 文档(在我的例子中是使用用户输入数据生成的文档的预览)。我可以成功地将文档中的 Html 和内联 CSS 显示到 iframe。但是我找不到将外部样式 sheet 包含到同一个 iframe 的方法。
我可以在 angular 文件中使用任何方法将外部 CSS 文件与我已成功传递到 iframe 的 html 集成。
我目前正在使用
<iframe [srcdoc] = "mypreview" ></iframe>
"mypreviw" 是我从后端
带来的html 字符串
我还使用了 DOM 消毒剂来消毒 html 字符串。我可以用类似的方法引入 Styles 字符串。但是请让我知道是否有任何方法可以将这两个字符串集成到 iframe 中。
除 iframe 之外或与 iframe 类似的任何解决方案都可以。我需要我的文档的良好预览,就是这样
谢谢。
您可以使用 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>',
);
我的应用程序前端使用Angular。
我正在尝试显示 html 文档(在我的例子中是使用用户输入数据生成的文档的预览)。我可以成功地将文档中的 Html 和内联 CSS 显示到 iframe。但是我找不到将外部样式 sheet 包含到同一个 iframe 的方法。
我可以在 angular 文件中使用任何方法将外部 CSS 文件与我已成功传递到 iframe 的 html 集成。
我目前正在使用
<iframe [srcdoc] = "mypreview" ></iframe>
"mypreviw" 是我从后端
带来的html 字符串我还使用了 DOM 消毒剂来消毒 html 字符串。我可以用类似的方法引入 Styles 字符串。但是请让我知道是否有任何方法可以将这两个字符串集成到 iframe 中。
除 iframe 之外或与 iframe 类似的任何解决方案都可以。我需要我的文档的良好预览,就是这样
谢谢。
您可以使用 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>',
);