Как поместить html-ответ, полученный от XMLHttpRequest, в iframe в Angular7? - PullRequest
0 голосов
/ 17 октября 2019

У кого-нибудь есть идеи, как встроить html-ответ этого XHR-запроса в iframe в Angular7?

  ngAfterViewInit() {
    var link =  document.querySelector('#frame');
    this.populateIframe(link, "https://localhost:5601/app/kibana", 
    [['Authorization', 'Basic xxxxxxxxxxx']]);
  }
    populateIframe(iframe: any, url2: any, headers: any) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url2);
        xhr.onreadystatechange = handler;
        xhr.responseType = "document";
        headers.forEach(function(header: any) {
          xhr.setRequestHeader(header[0], header[1]);
        });

        xhr.send();

        function handler() {
          if (this.readyState === this.DONE) {
            if (this.status === 200) {
              iframe.src = "data:text/html;charset=utf-8," + escape(this.responseXML);
            } else {
              console.error('XHR failed', this);
            }
          }
        }
      }

Это мой iframe

<iframe id="frame" width="100%" height="100%" src=""></iframe>

Я получаю html-ответ отXHR запрос, но не может поместить его в iframe. Эта строка

iframe.src = "data:text/html;charset=utf-8," + escape(this.responseXML);

не работает.

1 Ответ

0 голосов
/ 17 октября 2019

Я добавил iframe на страницу май

<iframe #ifr> <p>Your browser does not support iframes.</p> </iframe>

Использовал @ViewChild для доступа к iframe
@ViewChild('ifr') iframe: ElementRef;

Установить источник iframeв ngAfterViewInit метод

this.iframe.nativeElement.src = 'data:text/html;charset=utf-8,%3Cstrong%3E%3Ci%3Etest%3C/i%3E%3C/strong%3E';

Работает просто отлично. Возможно, что-то не так с доступом к iframe или данным, которые вы получаете в ответ. Указанный вами код недостаточен.

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