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 -
BroadcastChannel API - and compares the differences between them.
An example of a window.postMessage call is as follows.
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.
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
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.
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.
For more specific usage and examples, see the MDN documentation, not here.
For inter-page interaction, there are other more ways to.
- using URL parameters to pass values (?param=value), received with the URLSearchParams API, but only once, when the page is opened
- directly manipulate parent, top (Window object), or contentWindow of iFrame (Window object)
- Channel Messaging API, which only supports two-way communication between two pages
- 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)
- Shared Worker or Service Worker
These methods in increasing order of difficulty, but of course more powerful, for reference!