Adjust height of Iframe according to content size in angular 2

Question

I want to adjust the height of my iframe according to its content size

Here is my component file:

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

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

Here is my HTML file:

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

James Limper · Answer 1 · 2017-08-29T17:22:41.327

This is what I ended up with. Started with a directive I found online and got it working. Sometimes it takes a while for the page to load, thus the setTimeout.

import {Directive, ElementRef, OnInit, Renderer} from "@angular/core";

@Directive({
    selector: "[iframeAutoHeight]"
})
export class IframeAutoHeightDirective implements OnInit {
    private el: any;
    private renderer: Renderer;
    private prevHeight: number;
    private sameCount: number;

    constructor(_elementRef: ElementRef, _renderer: Renderer) {
        this.el = _elementRef.nativeElement;
        this.renderer = _renderer;
    }

    ngOnInit() {
        const self = this;
        if (this.el.tagName === "IFRAME") {
            this.renderer.listen(this.el, "load", () => {
                self.prevHeight = 0;
                self.sameCount = 0;
                setTimeout(() => {
                    self.setHeight();
                }, 50);
            });
        }
    }

    setHeight() {
        const self = this;
        if (this.el.contentWindow.document.body.scrollHeight !== this.prevHeight) {
            this.sameCount = 0;
            this.prevHeight = this.el.contentWindow.document.body.scrollHeight;
            this.renderer.setElementStyle(
                self.el,
                "height",
                this.el.contentWindow.document.body.scrollHeight + "px"
            );
            setTimeout(() => {
                self.setHeight();
            }, 50);

        } else {
            this.sameCount++;
            if (this.sameCount < 2) {
                setTimeout(() => {
                    self.setHeight();
                }, 50);
            }
        }
    }
}

Usage:

    <iframe [src]="iframeUrl" iframeAutoHeight></iframe>

DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame. — Tzvi Gregory Kaidanov, May 07 '18 at 12:10

score 0 · Answer 2 · answered Mar 26 '17 at 15:00

Firstly, announce the function onload which handles load event in template:

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

Secondly, get HTMLFrameElement object in component as soon as load event is coming:

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

Finally, you can ajust iframe size in component like the following:

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

score 0 · Answer 3 · answered Dec 03 '19 at 00:29

Add this to your <head> section:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

As found on sitepoint discussion.

*Note, this answer was found on this question: Make iframe automatically adjust height according to the contents without using scrollbar? Kudos to https://stackoverflow.com/users/1190388/hjpotter92 for this answer. Wanted to add it here because the pure Javascript answer worked for my angular site.

Adjust height of Iframe according to content size in angular 2

3 Answers3