Angular: не может писать несколько раз в Iframe - PullRequest
0 голосов
/ 16 мая 2019

Я использую angular с Iframe, и у меня другое поведение между IE и другими браузерами. Мой Iframe получает сообщение от его родительского компонента, затем я записываю сообщение в Iframe, используя window.write (). Chrome может выполнить multible window.write (), но IE останавливается после выполнения первого window.write () без ошибок. Он код:

Компонент:

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>

Дисплей:

  • Хром:

Мои данные
Мои данные

  • IE:

Мои данные

На самом деле я использую библиотеку рисования, которая использует document.write, и я вызываю ее для записи в Iframe, когда родительский компонент отправляет сообщение.

Вопрос: Как я могу заставить IE выполнить mutiple window.write ()?

Любая помощь, пожалуйста?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...