我正在尝试使用下面的组件设置 IFrame 源输入。
由于某种原因它不起作用,没有显示网页。如何正确设置输入源?
调用方式:
<app-viewer-iframe-two
[url1]="'http://www.food.com'"
[url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>
typescript : export class ViewerIframeTwoComponent implements OnInit {
constructor() { }
@Input() url1: string;
@Input() url2: string;
ngOnInit(): void {
}
}
HTML: <div class="box">
<iframe class="iframe-one" src="{{url1}}" frameborder="0"
scrolling="yes" align="left"> </iframe>
</div>
<div class="box">
<iframe class="iframe-two" src="{{url1}}" frameborder="0"
scrolling="yes" align="right"></iframe>
</div>
错误:没有来源被设置,
资源:这仅适用于 Angular 1
How to set an iframe src attribute from a variable in AngularJS
最佳答案
是的,将任何内容放入与 Angular.js 中相同的 url 中仍然是不安全的。绕过它 - 它仍然是不安全的,但您将承担责任而不是 Angular 开发人员。
constructor(public sanitizer: DomSanitizer) { }
ngOnInit() {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}
写成 [src]="urlSafe"
https://angular.io/api/platform-browser/DomSanitizer
关于 Angular 10 : Set IFrame URL Input with Variable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63403559/