EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4521 iframe: Re-set iframe listeners if element is recreated

main
Dani Palou 2024-03-14 12:04:25 +01:00
parent 737cc0b18b
commit 8f880c6cb8
1 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/core/components/iframe/iframe.ts
View File

@ -40,7 +40,12 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
static loadingTimeout = 15000; static loadingTimeout = 15000;
@ViewChild('iframe') iframe?: ElementRef; @ViewChild('iframe') set iframeElement(iframeRef: ElementRef | undefined) {
this.iframe = iframeRef?.nativeElement;
this.initIframeElement();
}
@Input() src?: string; @Input() src?: string;
@Input() id: string | null = null; @Input() id: string | null = null;
@Input() iframeWidth?: string; @Input() iframeWidth?: string;
@ -59,6 +64,7 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
initialized = false; initialized = false;
protected iframe?: HTMLIFrameElement;
protected style?: HTMLStyleElement; protected style?: HTMLStyleElement;
protected orientationObs?: CoreEventObserver; protected orientationObs?: CoreEventObserver;
protected navSubscription?: Subscription; protected navSubscription?: Subscription;
@ -79,11 +85,6 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
return; return;
} }
const iframe: HTMLIFrameElement | undefined = this.iframe?.nativeElement;
if (!iframe) {
return;
}
this.initialized = true; this.initialized = true;
if (this.showFullscreenOnToolbar || this.autoFullscreenOnRotate) { if (this.showFullscreenOnToolbar || this.autoFullscreenOnRotate) {
@ -97,7 +98,7 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
}); });
const shadow = const shadow =
iframe.closest('.ion-page')?.querySelector('ion-header ion-toolbar')?.shadowRoot; this.elementRef.nativeElement.closest('.ion-page')?.querySelector('ion-header ion-toolbar')?.shadowRoot;
if (shadow) { if (shadow) {
this.style = document.createElement('style'); this.style = document.createElement('style');
shadow.appendChild(this.style); shadow.appendChild(this.style);
@ -119,18 +120,6 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
// Show loading only with external URLs. // Show loading only with external URLs.
this.loading = !this.src || !CoreUrlUtils.isLocalFileUrl(this.src); this.loading = !this.src || !CoreUrlUtils.isLocalFileUrl(this.src);
CoreIframeUtils.treatFrame(iframe, false);
iframe.addEventListener('load', () => {
this.loading = false;
this.loaded.emit(iframe); // Notify iframe was loaded.
});
iframe.addEventListener('error', () => {
this.loading = false;
CoreDomUtils.showErrorModal('core.errorloadingcontent', true);
});
if (this.loading) { if (this.loading) {
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
@ -138,6 +127,27 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
} }
} }
/**
* Initialize things related to the iframe element.
*/
protected initIframeElement(): void {
if (!this.iframe) {
return;
}
CoreIframeUtils.treatFrame(this.iframe, false);
this.iframe.addEventListener('load', () => {
this.loading = false;
this.loaded.emit(this.iframe); // Notify iframe was loaded.
});
this.iframe.addEventListener('error', () => {
this.loading = false;
CoreDomUtils.showErrorModal('core.errorloadingcontent', true);
});
}
/** /**
* Check if the element is in a hidden page. * Check if the element is in a hidden page.
* *
@ -252,8 +262,8 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
document.body.classList.toggle('core-iframe-fullscreen', this.fullscreen); document.body.classList.toggle('core-iframe-fullscreen', this.fullscreen);
if (notifyIframe && this.iframe?.nativeElement) { if (notifyIframe && this.iframe) {
(<HTMLIFrameElement> this.iframe.nativeElement).contentWindow?.postMessage( this.iframe.contentWindow?.postMessage(
this.fullscreen ? 'enterFullScreen' : 'exitFullScreen', this.fullscreen ? 'enterFullScreen' : 'exitFullScreen',
'*', '*',
); );