问题描述
- 主要是用变量对iframe页面的参数进行赋值时报错，直接使用字符串不会报错、
故障原因
-因为在iframe中执行angular不信任的操作，需要使用angular提供的DomSanitizer
解决办法
- 使用Angular提供的DomSanitizer
url: any;
constructor(
private sanitizer: DomSanitizer
) {}
ngOnInit() {
setTimeout(() => {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
`http://www.baidu.com`
);
}, 1000);
}
- 创建一个Pipe
import { Pipe, PipeTransform} from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
声明Pipe
@NgModule({
imports: [ ... ],
declarations: [ ..., SafePipe ],
bootstrap: [ App ]
})
使用pipe文章来源：https://www.toymoban.com/news/detail-538728.html
<iframe [src]="your_url_here | safe" id="inneriframe" scrolling="no" ></iframe>
参考链接
1.Unsafe value used in a resource URL context (iframe)文章来源地址https://www.toymoban.com/news/detail-538728.html
到了这里，关于Angular 异常 NG0904: unsafe value used in a resource URL context的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
