ionic3 增加iframe

1. 对请求的url进行安全处理。

 

import { Component } from '@angular/core';

import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  myurl = 'https://www.baidu.com/';
  srcUrl:any;
  constructor(private sanitizer: DomSanitizer) {
    this.srcUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.myurl);
  }

  loaded() {

  }
}

  2. 在模版中增加iframe，注意边框等属性

 

<ion-header>
  <ion-navbar>
    <ion-title>个人应用</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="content">
  <iframe id="iframe" class="iframe" height="100%" width="100%"
          frameborder="no" border="0" marginwidth="0"
          [src]="srcUrl"
          (load)="loaded()">
  </iframe>
</ion-content>