根据角度2中的内容大小调整Iframe的高度

Question

我想根据 iframe 的内容大小调整其高度

这是我的组件文件：

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
constructor( private sanitizer: DomSanitizer){}

 hideFeed(myFeed){
       this.iframeURL = this.sanitizer.bypassSecurityTrustResourceUrl( myFeed.contentUrl);     
this.showIframe = true;

这是我的 HTML 文件：

<div class="container-fluid" *ngIf = "showIframe" >
  <div class="col-lg-12 col-md-12 col-xs-12" class="feedIframe">  
      <iframe  scrolling="auto" frameborder="0"        
        style=" position: relative; height: 100%; width: 100%;"  [src]="iframeURL">
      </iframe>
       <a (click) = "refreshPage()" class="button">
          <span style="color: #555;" >BACK</span>
      </a>
  </div>
</div>

Answer 1

首先声明模板中onload处理事件的函数：load

  <iframe  scrolling="auto" frameborder="0" (load)="onload($event)"      
    style=" position: relative; height: 100%; width: 100%;"  [src]="iframeURL">
  </iframe>

其次，HTMLFrameElement一旦load事件到来，就获取组件中的对象：

  el: HTMLFrameElement;
  onload(ev: Event) {
    this.el = <HTMLFrameElement>ev.srcElement;
  }

最后，您可以调整组件中的 iframe 大小，如下所示：

  adjust() {
    this.el.height="300";
    this.el.width="300";
  }