JavaScript Cross Tab Cross Site Communication

Hello, everyone 👋

In this article you will read about how to enable data transfer between browser tabs, across two different sites using JavaScript.

window.open

In JavaScript we can use window.open to open a window or browser tab. It returns a reference object of the window we opened, using which we will be able to control the opened window like closing, check if it is closed by the user, send data etc.

/* open a browser tab of site kishoreconnect.com */
const windowObj = window.open('https://kishoreconnect.com');

window.postMessage

Using window.postMessage we can send data across windows or browser tabs. This is how you do it,

const url = 'https://kishoreconnect.com';
const windowObj = window.open(url);
/* send data to an opened browser tab of site kishoreconnect.com */
windowObj.postMessage('hello world', url);

window.onmessage

Use window.onmessage event on the opened window to listen and receive the message that was sent,

/* Receiver Window - kishoreconnect.com */
window.onmessage = (event) => {
    /* received data: hello world */
    console.log(event.data); 
    /* send response back to sender */
    event.source.postMessage('message received!', event.origin);
}

/* Sender Window - example.com */
window.onmessage = (event) => {
   /* received data: message received! */
   console.log(event.data); 
}

Determine if the opened window is ready to receive data

For the opened window to receive data it should have javascript fully loaded and onmessage event is subscribed, else the data sent will be lost. So how can the sender window determine that the receiver window is loaded and ready to receive data before sending any data?

If the domain name of sender and receiver window URL is the same, receiver can use window.opener object to send handshaking message to notify sender when loaded and ready. window.opener is the reference object of the sender window that opened the receiver window.

/* Receiver window starts the communication with sender */
window.opener.postMessage('I am ready!', window.opener);

If the sender and receiver window URL domain name is different (cross-site) above method will not work and give you cross-origin error due to security reasons.

To get around the cross-origin issue, we need to continuously poll the receiver window and see if it is loaded and ready to receive data. We can do as given below,

/* Sender - example.com */
const url = 'https://kishoreconnect.com';
const windowObj = window.open(url);
/* start polling receiver for every 100ms to see if it is loaded and ready */
const poll = setInterval(() => windowObj.postMessage('are you ready?', url), 100);

window.onmessage = (event) => {
   /* check if response received from receiver */
   if(event.data === 'I am ready!') { 
   /* stop polling */
   clearInternal(poll); 
   /* send actual data */
   windowObj.postMessage('here is your data', url); 
}

/* Receiver - kishoreconnect.com*/
window.onmessage = (event) => {
  /* make sure message received from trusted source */
  if(event.origin === 'example.com') { 
     if (event.data === 'are you ready?') {
         event.source.postMessage('I am ready!', event.origin);
     } else {
         /* process actual data */
         console.log(event.data); 
     }
  }
};

Thanks for reading! Stay tuned 🙂