JavaScript - send messages between windows with BroadcastChannel

8 points
Created by:

In this article, we would like to show you how we can communicate between different browser tabs.

Messages sending beetween windows with BroadcastChannel - JavaScript
Messages sending between windows with BroadcastChannel - JavaScript

Quick solution: 

const broadcastChannel = new BroadcastChannel('my-channel-name');

broadcastChannel.addEventListener('message', event => {
    const message =;

const broadcastMessage = (message) => {

BroadcastChannel allows communication between tabs, frames, iframes and windows. The connection is made in the browser and doesn't need a backend. 

The message is broadcast using the postMessage() method and the recipients are windows that listen through the addEventListener.


Open this post in two or more tabs/windows, run example and send messages.

Practical example: 

// ONLINE-RUNNER:browser;

    <div id="window-name">Window name: null</div>
      <input id="message-text" />
      <button onclick="handleClick()">Broadcast</button>
      <div>Recived messages:</div>
      <textarea id="recived-messages" style="width: 260px; height: 200px"></textarea>
      	const windowNameElement = document.querySelector('#window-name');
        const messageTextElement = document.querySelector('#message-text');
        const recivedMessagesElement = document.querySelector('#recived-messages');

      	// ---------------------------------

      	const windowName = `window-${}${Math.random()}`; // ~~ unique window name
        const channelName = 'my-notifications'; // any name here
        const broadcastChannel = new BroadcastChannel(channelName);

        broadcastChannel.addEventListener('message', event => {
            const message =;
            recivedMessagesElement.value += `${message.windowName}: ${message.windowMessage}\n`;

        const broadcastMessage = (windowMessage) => {
            const message = {
                windowName: windowName,
                windowMessage: windowMessage

      	// ---------------------------------
      	windowNameElement.innerText = `Window name: ${windowName}`;

      	const handleClick = (windowMessage) => {
            messageTextElement.value = '';



BroadcastChannel interface is not supported in Internet Explorer, Safari and older browsers, so use with caution.


  1. BroadcastChannel - MDN Docs
  2. BroadcastChannel API - MDN Docs
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂