W3Docs

Apariencia

Español

Dominando la Comunicación entre Ventanas en JavaScript ​

La comunicación entre ventanas en JavaScript es esencial para los desarrolladores web que necesitan gestionar el intercambio de datos entre diferentes contextos de navegación. Esta guía completa profundiza en los detalles de la comunicación entre ventanas, proporcionando explicaciones detalladas y ejemplos prácticos. Nuestro objetivo es brindarte el conocimiento necesario para manejar esta avanzada característica de JavaScript de manera efectiva.

Comprender la Comunicación entre Ventanas ​

La comunicación entre ventanas se refiere al proceso de intercambio de datos entre diferentes ventanas o marcos. Esto puede incluir la comunicación entre una ventana principal y una ventana secundaria (ventana emergente) o entre múltiples marcos dentro de la misma ventana principal.

Escenarios que Requieren Comunicación entre Ventanas ​

  1. Ventanas emergentes (Popups): Cuando se abre una nueva ventana mediante window.open(), se vuelve necesaria la comunicación entre la ventana principal y la secundaria.
  2. Comunicación con iframes: A menudo, las aplicaciones web utilizan iframes para incrustar contenido. La comunicación efectiva entre la ventana principal y los iframes es crucial.
  3. Pestañas: En ocasiones, se requiere el intercambio de datos entre diferentes pestañas.

Métodos de Comunicación entre Ventanas ​

Uso de window.postMessage() ​

El método window.postMessage() proporciona una forma de enviar datos de manera segura entre diferentes ventanas o marcos.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Cross-Window Communication</title>
  <style>
    #childIframe, #childPopup {
      width: 100%;
      height: 200px;
      border: 1px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Cross-Window Communication Examples</h1>

  <!-- Button to Open Popup -->
  <button id="openPopup">Open Popup</button>
  <div id="parentPopupDisplay"></div>

  <!-- Iframe -->
  <iframe id="childIframe" srcdoc="
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='UTF-8' />
      <title>Child Iframe</title>
    </head>
    <body>
      <div id='childIframeDisplay'></div>
      <script>
        window.addEventListener('message', (event) => {
          // Note: For cross-origin contexts, replace window.location.origin with the hardcoded parent origin.
          if (event.origin !== window.location.origin) return;
          document.getElementById('childIframeDisplay').innerText = 'Message from parent: ' + event.data;
          event.source.postMessage('Hello, Parent Window!', event.origin);
        });
      </script>
    </body>
    </html>
  "></iframe>
  <div id="iframeDisplay"></div>

  <!-- Scripts for Parent Window -->
  <script>
    // Handle Popup Communication
    document.getElementById('openPopup').addEventListener('click', () => {
      const popup = window.open('', 'popupWindow', 'width=600,height=400');
      popup.document.write(`
        <!DOCTYPE html>
        <html lang='en'>
        <head>
          <meta charset='UTF-8' />
          <title>Popup Window</title>
        </head>
        <body>
          <div id='popupDisplay'></div>
          <script>
            window.addEventListener('message', (event) => {
              // Note: For cross-origin contexts, replace window.location.origin with the hardcoded parent origin.
              if (event.origin !== window.location.origin) return;
              document.getElementById('popupDisplay').innerText = 'Message from parent: ' + event.data;
              event.source.postMessage('Hello, Parent Window!', event.origin);
            });
          <\/script>
        </body>
        </html>
      `);
      setTimeout(() => {
        // For cross-origin, replace '*' with the exact target origin (e.g., 'https://example.com')
        popup.postMessage('Hello from parent!', '*');
      }, 1000);
    });

    // Handle Iframe Communication
    const iframe = document.getElementById('childIframe');

    iframe.onload = () => {
      iframe.contentWindow.postMessage('Hello from parent window!', '*');
    };

    window.addEventListener('message', (event) => {
      if (event.origin !== window.location.origin) return;
      if (event.source === iframe.contentWindow) {
        document.getElementById('iframeDisplay').innerText = 'Message from iframe: ' + event.data;
      } else {
        document.getElementById('parentPopupDisplay').innerText = 'Message from popup: ' + event.data;
      }
    });
  </script>
</body>
</html>
Try it Yourself »

En este ejemplo combinado, la ventana principal abre una ventana emergente e incrusta un iframe. Tanto la ventana emergente como el iframe pueden comunicarse con la ventana principal utilizando postMessage(). Los mensajes se muestran dentro de los elementos div correspondientes para una visualización clara.

nota

Aunque document.write() funciona para demostraciones simples, las mejores prácticas modernas recomiendan usar DOMParser o URLs Blob para inyectar contenido en ventanas emergentes de forma segura.

Acceso a Referencias de Ventana ​

Cuando abres una nueva ventana, obtienes una referencia a ella que se puede utilizar para manipularla o comunicarte con ella.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Direct Manipulation Example</title>
  <style>
    #childIframe {
      width: 100%;
      height: 200px;
      border: 1px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Direct Manipulation Example</h1>

  <!-- Button to Open Popup -->
  <button id="openChild">Open Child Window</button>
  <div id="parentChildDisplay"></div>

  <!-- Iframe -->
  <iframe id="childIframe" srcdoc="
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='UTF-8' />
      <title>Child Iframe</title>
    </head>
    <body>
      <div id='childIframeContent'>Initial Content</div>
    </body>
    </html>
  "></iframe>

  <!-- Scripts for Parent Window -->
  <script>
    document.getElementById('openChild').addEventListener('click', () => {
      const childWindow = window.open('', 'childWindow', 'width=600,height=400');
      childWindow.document.write(`
        <!DOCTYPE html>
        <html lang='en'>
        <head>
          <meta charset='UTF-8' />
          <title>Child Window</title>
        </head>
        <body>
          <div id='childContent'>Initial Content</div>
        </body>
        </html>
      `);
      // Ensure the content is updated after the window has fully loaded
      setTimeout(() => {
        childWindow.document.body.innerHTML += '<p>Message from parent window</p>';
      }, 1000); // Adjust the timeout duration as necessary
    });

    const iframe = document.getElementById('childIframe');

    iframe.onload = () => {
      const iframeDoc = iframe.contentWindow.document;
      iframeDoc.getElementById('childIframeContent').innerText += ' - Updated by Parent Window';
    };
  </script>
</body>
</html>
Try it Yourself »

En este ejemplo, la ventana principal abre una ventana secundaria y modifica directamente su contenido una vez que se ha cargado. Además, actualiza el contenido de un iframe incrustado.

advertencia

La manipulación directa del DOM a través de contentWindow.document o window.opener está restringida por la Política de Origen Similar (SOP) en contextos de origen cruzado. Para una comunicación segura y confiable, siempre prefiere postMessage(). Para ventanas emergentes del mismo origen, window.opener se puede usar como alternativa para acceder a la ventana principal directamente.

nota

Al usar srcdoc, el contenido del iframe se carga de forma asíncrona. El controlador onload garantiza que el DOM esté listo, pero para escenarios complejos, considera activar la comunicación mediante un evento DOMContentLoaded enviado desde dentro del iframe.

Uso de Local Storage y Session Storage ​

Local Storage y Session Storage proporcionan un método alternativo para la comunicación entre ventanas. Ambas opciones de almacenamiento están limitadas al origen, lo que permite que diferentes ventanas del mismo origen accedan a datos compartidos.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Local Storage Example</title>
</head>
<body>
  <h1>Local Storage Example</h1>
  <button id="storeData">Store Data</button>
  <button id="retrieveData">Retrieve Data</button>
  <div id="storageDisplay"></div>

  <script>
    // Listen for changes triggered by other windows/tabs
    window.addEventListener('storage', (event) => {
      if (event.key === 'sharedData') {
        document.getElementById('storageDisplay').innerText = 'Updated Data: ' + event.newValue;
      }
    });

    document.getElementById('storeData').addEventListener('click', () => {
      localStorage.setItem('sharedData', 'This is shared data');
    });

    document.getElementById('retrieveData').addEventListener('click', () => {
      const data = localStorage.getItem('sharedData');
      document.getElementById('storageDisplay').innerText = 'Stored Data: ' + data;
    });
  </script>
</body>
</html>
Try it Yourself »

En este ejemplo, la ventana principal almacena datos en localStorage y los recupera al hacer clic en los botones. Para habilitar la sincronización entre ventanas, se agrega un oyente de eventos storage. Ten en cuenta que el evento storage solo se activa en otros contextos de navegación, no en el que provocó el cambio.

API Broadcast Channel ​

La API Broadcast Channel permite una comunicación sencilla entre contextos de navegación (ventanas, pestañas, iframes) que comparten el mismo origen.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Broadcast Channel Example</title>
</head>
<body>
  <h1>Broadcast Channel Example</h1>
  <button id="sendMessage">Send Message</button>
  <div id="broadcastDisplay"></div>

  <script>
    const channel = new BroadcastChannel('example_channel');

    channel.onmessage = (event) => {
      document.getElementById('broadcastDisplay').innerText = 'Broadcast message received: ' + event.data;
    };

    document.getElementById('sendMessage').addEventListener('click', () => {
      channel.postMessage('Hello from another context!');
    });
  </script>
</body>
</html>
Try it Yourself »

En este ejemplo, se crea un canal de difusión (Broadcast Channel) y se envía un mensaje al hacer clic en el botón. El mensaje se recibe y muestra dentro de un elemento div.

Para probar este ejemplo correctamente:

  1. Haz clic en el botón 'Try it Yourself' (Pruébalo tú mismo) dos veces para tener la página de ejemplo en dos pestañas diferentes.
  2. Luego, haz clic en el botón "Send Message" (Enviar mensaje) en una de las pestañas/ventanas.
  3. Deberías ver aparecer el mensaje en la otra pestaña/ventana.

La API BroadcastChannel está diseñada para la comunicación entre pestañas, por lo que el mensaje se enviará desde una pestaña/ventana a todas las demás que estén abiertas en el mismo origen (el mismo archivo HTML en este caso).

advertencia

Al enviar datos entre ventanas, utiliza JSON para serializar los datos, garantizando compatibilidad y facilidad de análisis.

javascript
const message = { type: 'greeting', content: 'Hello, Child Window!' };
childWindow.postMessage(JSON.stringify(message), '*');

advertencia

Asegúrate de que la lógica de comunicación entre ventanas maneje escenarios donde la ventana de destino no sea accesible o esté cerrada.

javascript
try {
  childWindow.postMessage('Hello, Child Window!', '*');
} catch (e) {
  console.error('Failed to send message:', e);
}

Conclusión ​

La comunicación entre ventanas en JavaScript es una característica poderosa que, cuando se usa correctamente, puede mejorar significativamente la interactividad y la experiencia del usuario en las aplicaciones web. Al emplear métodos como window.postMessage(), almacenamiento local y la API Broadcast Channel, los desarrolladores pueden gestionar de manera eficiente el intercambio de datos entre diferentes ventanas, pestañas y marcos. Sigue las mejores prácticas para garantizar una comunicación segura y robusta, y aprovecha los ejemplos proporcionados para integrar estas técnicas en tus proyectos.

Práctica ​

¿Qué es cierto sobre la comunicación entre ventanas en JavaScript?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.