Conozco el uso básico de postMessage https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage cuando desea enviar datos a la ventana principal desde un iframe. Pero, ¿es posible hacer esto más genérico? por ejemplo, si en mi iframe publico con postMessage en el objeto de la ventana de mi iframe, lo que podría evitar que la ventana principal agregue un detector de eventos en los mensajes del iframe. Aquí hay un ejemplo :
en un árbol de directorios que se ve así:
root |___ frontpage | |____index.html |___ iframe |____index.htmlel iframe/index.html
<!DOCTYPE html> <html> <head> <title>iframe</title> <meta charset="utf-8" /> <script> const trustedOrigins = ["http://localhost:5001"]; function sendMsg(msg) { console.log(`Send message iframe window`, msg); window.postMessage(msg, trustedOrigins[0]); } setInterval(() => { sendMsg("Coucou") }, 5000); </script> </head> <body> <h1>Iframe body</h1> </body> </html>la página principal que incrusta el iframe: frontpage/index.html
<!DOCTYPE html> <html> <head> <title>main</title> </head> <body> <iframe src="http://localhost:5001/index.html"></iframe> <script> const trustedOrigins = ["http://localhost:5001"]; function onMsg(msg) { console.log(`Message from an iframe`, msg); } const iframe = document.querySelector("iframe"); iframe.onload = () => { console.log('Adding event listener on the iframe to catch its messages'); iframe.contentWindow.addEventListener("message", onMsg, false); }; </script> </body> </html>Esperaba poder mostrar los mensajes que el iframe se envía a sí mismo, pero no se muestra nada.
instale el servidor http para probarlo npm install -g http-server
cd frontpage http-server -p 5000 cd iframe http-server -p 5001vaya con un navegador a http://localhost:5000 y mire los mensajes de la consola, el iframe envía sus mensajes pero el detector de eventos capta alguno de ellos.
Por qué ?
window.addEventListener("message", function(event) { console.log(event); }, false);