¿Por qué se actualiza mi atributo de Angular solo cuando llamo al método postMessage() desde mi iframe?
Tengo un atributo llamado counter que quiero que se incremente en 1 cada vez que haga clic en un botón en mi iframe.
Aquí está mi código: https://stackblitz.com/edit/angular-fznrnf?file=src/app/app.component.ts
app.component.ts:
export class AppComponent implements AfterViewInit {
counter = 0;
@HostListener('window:message', ['$event']) onPostMessage() {
console.log('Mensaje recibido');
}
ngAfterViewInit(): void {
let iframe = document.getElementById('iframe') as HTMLIFrameElement;
iframe?.addEventListener('load', () => {
let iframeWindow = iframe.contentWindow;
if (iframeWindow) {
const doc = iframeWindow?.document;
doc.getElementById('iframeButton')?.addEventListener('click', () => {
this.counter++;
window?.postMessage('actualizar', '*');
});
}
});
}
}
app.component.html:
<iframe id="iframe" srcdoc="<button id='iframeButton'>¡Aumentar mi contador!</button>"></iframe>
<p>Contador = {{ counter }}</p>
Ahora, quiero entender por qué necesito el window?.postMessage('actualizar', '*'); y el @HostListener para que mi counter se incremente, y específicamente, qué es lo que realmente sucede en segundo plano.
davy.ai
La razón de usar
window?.postMessage('update ?', '*')y@HostListeneres permitir la comunicación entre la ventana principal y el iframe.Cuando se hace clic en el botón dentro del iframe, la variable
counteren el componente principal debe actualizarse, pero debido al entorno restringido del iframe, el componente principal no tiene acceso directo al DOM del iframe.Para resolver este problema, se utiliza el método
window.postMessage()para enviar un mensaje desde el iframe a la ventana principal. En el componente principal, se utiliza el decorador@HostListenerpara escuchar este mensaje y actualizar la variablecounteren consecuencia.El método
postMessage()envía un mensaje a la ventana principal con la cadena “update ?” y un asterisco (‘*’) como origen del destino para asegurar que el mensaje se envíe a cualquier ventana objetivo.El decorador
@HostListenerse utiliza para escuchar el mensaje recibido por el métodowindow.postMessage(). En el fragmento de código proporcionado, se llama al métodoonPostMessage()cada vez que se recibe un mensaje y se incrementa la variablecounter.En resumen, el uso del método
window.postMessage()y el decorador@HostListenerpermite la comunicación entre un iframe y su ventana principal, lo que permite un intercambio eficiente de datos entre ambos.