angular - Angular 10:使用变量设置 IFrame URL 输入
问题描述
我正在尝试使用下面的组件设置 IFrame 源输入。
由于某种原因它不起作用,没有显示网页。如何正确设置输入源?
调用方法:
<app-viewer-iframe-two
[url1]="'http://www.food.com'"
[url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>
打字稿:
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
解决方案
是的,将任何内容放入与 Angular.js 中相同的 url 仍然是不安全的。绕过它 - 它仍然是不安全的,但你将承担责任而不是 Angular 开发人员。
constructor(public sanitizer: DomSanitizer) { }
ngOnInit() {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}
写成[src]="urlSafe"
推荐阅读
- python - Pandas - 结合重采样值续
- java - 迁移到 Jboss EAP7 时出现 WELD 异常
- javascript - 在 Node.js 和 Mongoose 中从二进制文件重新创建图像
- .net - 一个不寻常的 AutoMapper 映射案例:是否可以设置一个高优先级的通用约定?
- python - Django 模型的名称错误
- javascript - 如何重命名mongodb atlas中已经存在的集合?
- c# - UWP Toast (AdaptiveImage) 不显示扩展名为 jpg 格式的图像
- python - 为什么 python3.7 sys.path 不像 python2.7 那样包含 PYTHONPATH ?
- java-8 - 如何限制 Stream API 表达式返回的元素数量
- postfix-mta - 在 Postfix 中使用 sender_dependent_default_transport_maps 时是否可以同时传递?