Promises with postMessage API

1. Cross-origin communication: The postMessage API allows communication between different origins, i.e., different domains or subdomains, which is otherwise restricted by the Same-Origin Policy. This can be useful for sharing information or data between different applications running on different domains.

2. Iframe communication: The postMessage API can be used to enable communication between an iframe and its parent window. This is useful when the iframe and parent window are from different domains and need to communicate with each other.

3. Cross-window communication: If a web application uses multiple windows or tabs, the postMessage API can be used to enable communication between these windows or tabs. This can be useful for sharing data or information between different parts of the same application.

4. Custom messaging protocols: The postMessage API allows developers to define their own messaging protocols for communication between windows or tabs. This can be useful when using third-party libraries or plugins that require custom messaging protocols.

How to use postMessage?

Between parent and child window

var targetWindow = window.open('http://example.com');
targetWindow.postMessage('Hello from the parent window!', 'http://example.com');

window.addEventListener('message', function(event) {
    console.log('Message received: ' + event.data);
		// Message received: Hello from the parent window!
});

Between window and iframe

var targetIframe = document.getElementById('my-iframe');
targetIframe.contentWindow.postMessage(
	'Hello from the parent window!', 
	'http://example.com'
);

window.addEventListener('message', function(event) {
    console.log('Message received: ' + event.data);
		// Message received: Hello from the parent window!
});

// parent.js

const sendMessage = (messagePayload, targetIframe, origin) => {
	targetIframe.contentWindow.postMessage(
		mesagePayload, 
		origin // iframe's origin url
	);
}

window.addEventListener('message', function (event) {
	processMessage(event.data)
}

const processMessage = (messageEvent) => {
	// add your business logic
}

// iframe.js

const sendMessage = (messagePayload, origin) => {
	window.parent..postMessage(
		mesagePayload, 
		origin // parent's origin url
	);
}

window.addEventListener('message', function (event) {
	processMessage(event.data)
}

const processMessage = (messageEvent) => {
	// add your business logic
}

Need for promise in postMessage

MessageChannel to the rescue

//parent.js
const channel = new MessageChannel();
const iframe = document.querySelector('iframe');

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;
  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
	// process message
}

//child.js

window.addEventListener("message", onMessage);

function onMessage(e) {
	// process message

  // Use the transfered port to post a message back to the main frame
  e.ports[0].postMessage("Message back from the IFrame");
}

Promises with postMessage and MessageChannel

//parent.js
const postMessagePromise = (message: any, iFrameRef: any) => {
  return new Promise((resolve, reject) => {
    const iFrameWindow = iFrameRef.contentWindow;

    const messageChannel = new MessageChannel();
    messageChannel.port1.onmessage = (res: any) => {
			// resolve promise when server sends back 
			// message on the mentioned port
			if (res.data.success)
	      resolve(res);
    };

		// reject promise if the message response on port times out
    setTimeout(() => {
      reject();
    }, 30000);

    try {
      iFrameWindow.postMessage(message, CLIENT_URL, [messageChannel.port2]);
    } catch (e) {
      reject(e);
    }
  });
};

// client.js
window.addEventListener("message", (messageEvent) => {
  messageEvent.ports[0]?.postMessage({
    success: true
  });
	// ... process messageEvent
});

Further Reading

1. https://github.com/krakenjs/zoid - one of the most populate ones.

2. https://github.com/dollarshaveclub/postmate - simpler functionality without any complex features.

3. https://github.com/davidjbradshaw/iframe-resizer - very specific use case.

---

👋

About

✉️

Contact

 

topmate.io/chetan1507

Newsletter