以角度 6 获取 IFrame img

Question

我的 Angular 应用程序中有一个 iframe。iframe 具有 base64 格式的图像。现在我正在尝试获取该图像的 base64 代码并将其存储在父页面/Angular 应用程序的变量中。请问有人可以帮忙吗？我找到了这篇文章

如何使用 Angular 6 从 Iframe 获取数据

这是我的 iframe 的 HTML 代码

<iframe src="http://eohdigitalappstore.co.za/test/test.html"></iframe>

通过能够在 iframe 页面中获取元素，我设法取得了进一步的进展，但现在我正在尝试获取元素树中的图像

const doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
console.log(doc.body);

我可以指向如下所示的 HTML 元素树

Answer 1

使用视图子项，它将为您提供与在普通 JavaScript 应用程序中ElementRef访问的nativeElement对象完全相同的对象。

示例（来源）：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('iframe') iframe: ElementRef;

  ngAfterViewInit() {
    const nativeEl =  this.iframe.nativeElement;
    if ( (nativeEl.contentDocument || nativeEl.contentWindow.document).readyState === 'complete' )        {
        nativeEl.onload = this.onIframeLoad.bind(this);
    } else {
      if (nativeEl.addEventListener) {
        nativeEl.addEventListener('load', this.onIframeLoad.bind(this), true);
      } else if (nativeEl.attachEvent) {
        nativeEl.attachEvent('onload', this.onIframeLoad.bind(this));
      }
    }
  }


  onIframeLoad() {
    const base64String = this.iframe.nativeElement.contentWindow.document.body.innerHTML;
    console.log(this.iframe.nativeElement.contentWindow.document.body.children[1].currentSrc);
  }
}

其他有趣的读物：https : //aakashgoel.com/capturing-the-load-event-of-an-iframe-a-case-study-1a3761c871fe

注意：如果您遵守同源策略，所有这些都是可能的。