如何将从 XMLHttpRequest 收到的 html 响应放入 Angular7 中的 iframe 中？答案

【问题标题】：How to put html response received from XMLHttpRequest into an iframe in Angular7?如何将从 XMLHttpRequest 收到的 html 响应放入 Angular7 中的 iframe 中？
【发布时间】：2020-02-14 05:11:42
【问题描述】：

有谁知道如何将此 XHR 请求的 html 响应嵌入到 Angular7 中的 iframe 中？

  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>

我收到来自 XHR 请求的 html 响应，但无法将其放入 iframe。这一行

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

不工作。

【问题讨论】：

标签： html ajax iframe xmlhttprequest angular7

【解决方案1】：

我在可能的页面上添加了一个 iframe

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

使用@ViewChild访问iframe
@ViewChild('ifr') iframe: ElementRef;

在ngAfterViewInit方法中设置iframe的来源

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

它工作得很好。访问 iframe 或作为响应获得的数据可能有问题。你提供的代码不够用。

【讨论】：

答案应该回答这个问题。如果您无法重现该问题，则应在评论中提及。
@Buzzinga 我们应该给this.iframe.nativeElement.src分配什么
@GowthamSadineni this.iframe.nativeElement.src = "data:text/html;charset=utf-8," + escape(this.responseXML);