angular1/angular2 嵌入外部链接

如嵌入外部链接 url 为 https://www.baidu.com

AngularJS

两种方式处理

1.在Controller中直接使用 $sce 服务

在js中定义变量:

$scope.src = $sce.trustAsResourceUrl('https://www.baidu.com');

使用:

<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}}"
        >

Angular2

同样两种处理方式

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>