如何解决如何在 iframe 中显示带有外部样式表的 html 文档？角度 Html CSS
我的应用程序前端使用 Angular。
我正在尝试显示一个 html 文档（在我的例子中是使用用户输入数据生成的文档的预览）。我可以成功地将文档中的 Html 和内联 CSS 显示到 iframe。但是我找不到将外部样式表包含到同一个 iframe 中的方法。
是否有任何方法可以在角度文件中使用将外部 CSS 文件与我已成功传递到 iframe 的 html 集成。
我正在使用
<iframe [srcdoc] = "mypreview" ></iframe>
"mypreviw" 是我从后端带来的 html 字符串
我也使用 DOM sanitizer 来清理 html 字符串。我可以用类似的方法引入 Styles 字符串。但是请让我知道是否有任何方法可以将这两个字符串集成到 iframe 中。
iframe 以外或类似的任何解决方案也可以。我需要对我的文档进行良好的预览，仅此而已
谢谢。
解决方法
您可以将 std 用于外部来源。
domsanitizer在 dom 清理之后，您可以在 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);
}
}
iframe如果您想在 <iframe width="100%" height="100%" frameBorder="0" [src]="mypreview"></iframe>
中显示 html，您可以试试这个
iframe里面的<div [innerHTML]="mypreview"></div>
会有所帮助
bypassSecurityTrustHtml版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
