Angular: Running Scripts within iFrame

Question

I get HTML as string as API response. The HTML contains few internal script tags which has functions called under $(window).load(). How do I load this HTML in my angular app.

I tried appending HTML string response to iFrame body. The HTML loads but the script tags aren't executed as window.load event is not fired when the angular route changes.

How do I approach this problem. Here's my code:

component.ts

ngOnInit() {
   const html = "
       <html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>"
   this.iframeDoc = this.iframe.nativeElement.contentDocument
   this.iframeDoc.body.innerHTML = html;
}

component.html

<iframe #iframe></iframe>

I want "I am in the function" to be logged when the iframe content is appended.

EDIT:

I also tried appending the HTML to a div instead of an iFrame. Here's the code:

component.html

<div id="wrapper" appRunScripts></div>

component.ts

ngOnInit() {
   const html = "
       <html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>"
   const wrapper = document.getElementById('wrapper');
   wrapper.innerHTML = html;
}

Also added a directive to run scripts within HTML. Here's the drective run-scripts.directive.ts

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

@Directive({
  selector: '[appRunScripts]' 
})
export class RunScriptsDirective implements OnInit {

  constructor(private elementRef: ElementRef) { }
  ngOnInit(): void {
      setTimeout(() => { // wait for DOM rendering
          this.reinsertScripts();
      });
  }
  reinsertScripts(): void {
      const scripts = <HTMLScriptElement[]>this.elementRef.nativeElement.getElementsByTagName('script');
      const scriptsInitialLength = scripts.length;
      for (let i = 0; i < scriptsInitialLength; i++) {
          const script = scripts[i];
          const scriptCopy = <HTMLScriptElement>document.createElement('script');
          scriptCopy.type = script.type ? script.type : 'text/javascript';
          if (script.innerHTML) {
              scriptCopy.innerHTML = script.innerHTML;
          } else if (script.src) {
              scriptCopy.src = script.src;
          }
          scriptCopy.async = false;
          script.parentNode.replaceChild(scriptCopy, script);
      }
  }

}

@sajankumarvijayan Yes I have done that. The code runs without error. But just that script isn't executed. — Chirag
– Chirag, Commented Mar 30, 2018 at 11:56

Yerkon · Accepted Answer · 2018-03-30 14:52:47Z

3

ngAfterViewInit() {
    let content = `<html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>`;
    let doc = this.iframeDoc.nativeElement.contentDocument || this.iframeDoc.nativeElement.contentWindow;
    doc.open();
    doc.write(content);
    doc.close();
  }

Access to your iframe in right lyfecycle hook.

ngAfterViewInit - Lifecycle hook that is called after a component's view has been fully initialized

If you want to run script. Inject:

 constructor(private sanitizer: DomSanitizer) {
    this.script = this.sanitizer.bypassSecurityTrustHtml(this.script);
  }

ngAfterViewInit() {
 let scripts = this.div.nativeElement.getElementsByTagName('script');
  for (let script of scripts) {
    eval(script.text)
  }
}

template:

<div #content [innerHTML]="script"> </div>

CODE EXAMPLE

edited Mar 30, 2018 at 14:52

answered Mar 30, 2018 at 12:00

Yerkon

4,8182 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chirag Over a year ago

How I achieve the same use case using div and not iframe? Check EDIT

Yerkon Over a year ago

@chiragshah, updated answer, but I can't access for jQuery for now.

Collectives™ on Stack Overflow

Angular: Running Scripts within iFrame

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related