如嵌入外部链接 url 为 https://www.baidu.com
AngularJS
两种方式处理
1.在Controller中直接使用 $sce 服务
在js中定义变量:
$scope.src = $sce.trustAsResourceUrl('https://www.baidu.com');
在html 中使用:
<iframe class="report-iframe"
width="750px"
height="750px"
seamless
frameBorder="0"
ng-src="{{src1}}"
>
2.自定义过滤器来处理,如
angular.module('app',[]).filter('to_trusted', function($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
}
});
使用时:
<iframe class="report-iframe"
width="750px"
height="750px"
seamless
frameBorder="0"
ng-src="{{src1 | to_trusted}}"
>
Angular
同样两种处理方式
1. 在组件中直接处理
export class DemoUrlPage {
url : SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {
}
ionViewDidLoad() {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl('http://www.baidu.com');
}
}
使用:
<ion-content padding>
<iframe class="report-iframe" width="100%" height="300" [src]="url"></iframe>
</ion-content>
2.在管道中使用:
定义管道:
@Pipe({
name: 'safeUrl',
})
export class SafeUrlPipe implements PipeTransform {
/**
* Takes a value and makes it lowercase.
*/
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
使用:
<ion-content padding>
<iframe class="report-iframe" width="100%" height="300" [src]="url | safeUrl"></iframe>
</ion-content>
