In multi-page web applications, you will encounter scenarios of inter-page interaction, such as: passing data from navigation pages to iFrame pages, notifying events between tab pages, and so on.

This article introduces two common interfaces for inter-page interaction - window.postMessage and BroadcastChannel API - and compares the differences between them.

Messaging Direction

window.postMessage

An example of a window.postMessage call is as follows.

1
2
3

// A Page
const B = window.open(B.html);
B.postMessage("hello B!", "*");

1
2
3
4
5

// B Page
function receiveMessage(ev) {
  alert(ev.data);
}
window.addEventListener("message", receiveMessage, false);

As you can see from the code, page A passes a Hello string to page B, which page B receives and alerts by listening.

window.postMessage is passed in one way and must specify the recipient’s (in fact, it calls the recipient’s API).

Broadcast Channeel API

An example of a Broadcast Channeel API call is as follows.

1
2
3
4
5
6

// A Page
const bc = new BroadcastChannel('fm86.7');
bc.onmessage = function (ev) {
  alert(ev.data);
}
bc.postMessage('Music Radio');

1
2
3
4
5

// B Page
const bc = new BroadcastChannel('fm86.7');
bc.onmessage = function (ev) {
  alert(ev.data);
}

1
2
3
4
5

// C Page
const bc = new BroadcastChannel('fm86.7');
bc.onmessage = function (ev) {
  alert(ev.data);
}

As you can see from the code, all three pages have access to the fm86.7 channel, and A broadcasts the Music Radio string, which is received by both B and C, and alerted out

Applicable scenarios

Single Page / Multi Page

Most single-page applications rely on built-in or plug-in implementation of global state management and are less likely to need to use the two methods in this article.

Consider using these two APIs when there is cross-page interaction in multi-page applications.

Directional/Broadcast/Cross-Domain

window.postMessage is generally used for targeted delivery of data, and cross-domain interaction is possible (you can set the targetOrigin to ensure security).

Broadcast Channel API is a kind of broadcast, access to the corresponding channel can be received by all pages, but only limited to this domain, does not support cross-domain.

MDN Documentation

For more specific usage and examples, see the MDN documentation, not here.

Other methods

For inter-page interaction, there are other more ways to.

  1. using URL parameters to pass values (?param=value), received with the URLSearchParams API, but only once, when the page is opened
  2. directly manipulate parent, top (Window object), or contentWindow of iFrame (Window object)
  3. Channel Messaging API, which only supports two-way communication between two pages
  4. pass data through localStorage, you can actively get, you can also use window.addEventListener("storage", callback) event trigger to get (the same, IndexedDB, Cookie and other storage solutions can be achieved between pages to pass data)
  5. Shared Worker or Service Worker

These methods in increasing order of difficulty, but of course more powerful, for reference!

Reference https://kaifeiji.cc/post/interactions-between-windows-postmessage-and-broadcastchannel/