Ejecuto un archivo HTML usando WebStorm 2022.1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Window.postMessage</title> </head> <body> <script> let time = 0; setInterval ( function () { window.top.postMessage("Source01", "*"); console.log(`Time: ${++time}`); }, 2000, time ) </script> </body> </html> Y está en la dirección: http://localhost:63342/XXX . Luego abro cualquier sitio web, digamos https://stackoverflow.com/ . En la consola, escribo el siguiente código
window.addEventListener("message", function (event) { console.log(event); })Observé que no se enviaban mensajes. ¿Olvidé algo?
window.top.postMessage envía el mensaje al documento en la ventana actual, en la parte superior de cualquier pila de marcos. Llamemos a esta Página A.
Si la URL de la página A aparece en la barra de direcciones del navegador, se enviará un mensaje a sí misma.
Si la URL en la barra de direcciones es la página B e incluye un iframe que carga la página A, enviará el mensaje a través de los marcos a la página B. (Stackoverflow no tiene <iframe src="http://localhost:63342/XXX"></iframe> por lo que este no es su caso).
Si carga la página C en una nueva ventana, la página A no le enviará un mensaje porque está en una ventana.
Si navega de la página A a la página D en la misma ventana, la página A no enviará un mensaje a la página D porque al alejarse de la página A se detendrá el programa JS.