W3docs
en
Log in

JavaScript Cross-Window Communication

Cross-window communication in JavaScript is essential for web developers who need to manage data exchange between different browsing contexts. This comprehensive

Cross-window communication in JavaScript is essential for web developers who need to manage data exchange between different browsing contexts. This comprehensive guide delves into the intricacies of cross-window communication, providing detailed explanations and practical examples. Our aim is to equip you with the knowledge to handle this advanced JavaScript feature effectively.

Understanding Cross-Window Communication

Cross-window communication refers to the process of exchanging data between different windows or frames. This can include communication between a parent window and a child window (popup) or between multiple frames within the same parent window.

Scenarios Requiring Cross-Window Communication

  1. Popup Windows: When a new window is opened via window.open(), communication between the parent and child windows becomes necessary.
  2. Iframe Communication: Often, web applications use iframes to embed content. Effective communication between the parent window and iframes is crucial.
  3. Tabs: Sometimes, data exchange between different tabs is required.

Methods of Cross-Window Communication

Using window.postMessage()

The window.postMessage() method provides a way to securely send data across different windows or frames.

<!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 »

In this combined example, the parent window opens a popup and embeds an iframe. Both the popup and the iframe can communicate with the parent window using postMessage(). Messages are displayed within respective div elements for clear visibility.

Note

While document.write() works for simple demos, modern best practices recommend using DOMParser or Blob URLs to inject content into popups safely.

Accessing Window References

When you open a new window, you get a reference to it which can be used to manipulate or communicate with it.

<!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 »

In this example, the parent window opens a child window and directly modifies its content once it has loaded. Additionally, it updates the content of an embedded iframe.

Warning

Direct DOM manipulation via contentWindow.document or window.opener is restricted by the Same-Origin Policy (SOP) for cross-origin contexts. For secure and reliable communication, always prefer postMessage(). For same-origin popups, window.opener can be used as an alternative to access the parent window directly.

Note

When using srcdoc, the iframe content loads asynchronously. The onload handler ensures the DOM is ready, but for complex scenarios, consider triggering communication via a DOMContentLoaded event dispatched from within the iframe.

Using Local Storage and Session Storage

Local Storage and Session Storage provide an alternative method for cross-window communication. Both storage options are scoped to the origin, allowing different windows from the same origin to access shared data.

<!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 »

In this example, the parent window stores data in localStorage and retrieves it upon button clicks. To enable cross-window synchronization, a storage event listener is added. Note that the storage event only fires in other browsing contexts, not the one that triggered the change.

Broadcast Channel API

The Broadcast Channel API enables simple communication between browsing contexts (windows, tabs, iframes) that share the same origin.

<!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 »

In this example, a Broadcast Channel is created, and a message is sent when the button is clicked. The message is received and displayed within a div element.

To test this example properly:

  1. Click the 'Try it Yourself' button twice, to have the example page in two different tabs.
  2. Then, click the "Send Message" button in one of the tabs/windows.
  3. You should see the message appear in the other tab/window.

The BroadcastChannel API is designed for inter-tab communication, so the message will be sent from one tab/window to all others that are open to the same origin (the same HTML file in this case).

Warning

When sending data between windows, use JSON to serialize the data, ensuring compatibility and ease of parsing.

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

Ensure your cross-window communication logic handles scenarios where the target window is not accessible or closed.

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

Conclusion

Cross-window communication in JavaScript is a powerful feature that, when used correctly, can significantly enhance the interactivity and user experience of web applications. By employing methods like window.postMessage(), local storage, and the Broadcast Channel API, developers can efficiently manage data exchange between different windows, tabs, and frames. Follow best practices to ensure secure and robust communication, and leverage the provided examples to integrate these techniques into your projects.

Practice

Practice

What is true about cross-window communication in JavaScript?