I'm using angular with Iframe and I have different behavour between IE and the other browsers. My Iframe receives a message from its parent component, then I write the message in the Iframe using window.write(). Chrome can exucute multible window.write() but IE stops after executing the first window.write() without errors. He's the code :

Component :

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

const iframeCode = `
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"/>

  <script type="text/javascript">
  function bindEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
      element.addEventListener(eventName, eventHandler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + eventName, eventHandler);
    }
  }

  bindEvent(window, 'message', function (e) {
    let message = JSON.parse(e.data);
    document.write('<div>' + message.data + '</div>');
    document.write('<div>' + message.data + '</div>');
  });
</script>

<body>
</body>
</html>
`;

@Component({
  selector: 'app-iframe-angular',
  templateUrl: './iframe-angular.component.html',
  styleUrls: ['./iframe-angular.component.css']
})
export class IframeAngularComponent implements OnInit {

  @ViewChild('iframe') iframe: ElementRef;

  constructor() {
  }

  ngOnInit() {
    this.setIframeReady(this.iframe);
  }

  public sendDataToIframe(): void {
    this.iframe.nativeElement.contentWindow.postMessage(JSON.stringify({data: 'My data'}), '*');
  }

  private setIframeReady(iframe: ElementRef): void {
    const win: Window = iframe.nativeElement.contentWindow;
    const doc: Document = win.document;
    doc.open();
    doc.write(iframeCode);
    doc.close();
  }

}
<button (click)="sendDataToIframe()">Send data to iframe</button>
<iframe #iframe frameborder="1" width="100%" height="100%"></iframe>

Display :

  • Chrome :

My data
My data

  • IE :

My data

In fact, I'm using a drawing lib that uses document.write, and I'm calling it to write in the Iframe, when parent component sends a message.

Question : How can I make IE execute mutiple window.write() ?

Any help please ?

0 Answers