postMessage.js

/************************************************
*
* 📩📩📩 window.postMessage() 📩📩📩
*
* The window.postMessage() method safely enables cross-origin communication 
* between Window objects; e.g., between a page and a pop-up that it spawned, 
* or between a page and an iframe embedded within it.
*
************************************************/

// Syntax

targetWindow.postMessage(
  message, // some object
  targetOrigin // URI of the recipient page
);

// Sender.js

const message = {foo: 'foo', bar: 'bar'};
const childWindowName = 'popup';
let childwin = null;


function openChildWindow() {
  childwin = 
    window.open('Receiver.html', childWindowName, 'height=300px, width=500px');
}

function sendMessage() {
  if (childwin) {
    // ⚠️⚠️⚠️  DO NOT use '*' in production
    childwin.postMessage(message, '*')
    childwin.focus();
  }
}

// Receiver.js

// Event listener to receive messages
window.addEventListener('message', event => {
  if (event.origin === 'mydomain.com') {
    const message = event.data; 
    console.log(message); // {foo: 'foo', bar: 'bar'}; 
  }
});