我们正在通过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页面正确显示,需要更改/添加什么?