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>