动态将IFRAME应用加载到Angular页面

时间:2019-02-12 10:57:32

标签: angular iframe

我们正在通过IFRAME将第三方应用程序集成到Angular 7应用程序中,这要求通过GET而不是<IFRAME src=动态加载第三方应用程序,以便注入其他标题:

  ngOnInit() {
    const url = `3-rd party app url address here`;
    this.load(url)
      .subscribe(blob => {
        this.iframe.nativeElement.src = blob;
      });
  }

  load(url: string): Observable<any> {
    return new Observable((observer: Subscriber<any>) => {
      let objectUrl: string = null;
      this.http
        .get(url, {headers: /* custom headers here */})
        .subscribe(m => {
          objectUrl = URL.createObjectURL(m);
          observer.next(objectUrl);
        });
      return () => {
        if (objectUrl) {
          URL.revokeObjectURL(objectUrl);
          objectUrl = null;
        }
      };
    });
  }

以下是this.iframe所引用的模板:

<iframe #iframe width="100%" height="100%" frameborder="0"></iframe>

发生了什么-第三方应用程序成功检索,但显示为点。

我相信这是因为我们不仅动态地加载HTML页面,而且还动态加载具有自己的script标签的整个应用程序。

那我想念什么?要使这样的动态IFRAME页面正确显示,需要更改/添加什么?

0 个答案:

没有答案