Keywords:: Cross-page communication, Broadcast Channel API communication, SharedWorker
There are several ways to communicate between multiple tabs within a browser:
Use the Broadcast Channel API: The Broadcast Channel API is a cross-page communication mechanism provided by HTML5. The API allows you to send messages between different tabs for real-time, two-way communication. Use localstorage or sessionstorage: localstorage and sessionstorage are browser-provided local storage mechanisms. Cross-tab communication can be achieved by modifying the data in localstorage or sessionstorage in one tab, and then listening for changes in that data in other tabs. Use a sharedworker: A sharedworker is a special type of web worker that can be shared by multiple browser tabs. With sharedworker, different tabs can communicate via messaging. Use of cookies: By setting cookies under the same domain, different tabs can share this cookie data. A cookie can be set in one tab and then read in another tab to communicate. Use windowpostmessage：window.The postmessage method enables cross-domain communication between different browser windows. You can send messages to other windows by using the postmessage method in one window, and the receiving window receives and processes messages by listening for message events. The Broadcast Channel API is a cross-page communication mechanism provided by HTML5 that enables real-time two-way communication between multiple browser tabs under the same domain name.
With the Broadcast Channel API, you can create a channel through which different tabs can send and receive messages. Each tab listens for messages in the channel and processes the received messages accordingly.
The steps to use the Broadcast Channel API to implement communication between multiple tabs are as follows:
1. Create a broadcastchannel object and specify a unique channel name:
const channel = new broadcastchannel('channelname');2. Send a message in one tab:
channel.postmessage('message');3. Listen to messages and respond in other tabs:
channel.addeventlistener('message', event => )Through the Broadcast Channel API, different tabs can send and receive messages in real time, so as to achieve communication between multiple tabs. This is useful for scenarios such as sharing status across multiple tabs, syncing data, or enabling collaboration. Please note that the Broadcast Channel API only works between tabs under the same domain name and does not support cross-domain communication.
SharedWorker is a web worker that is shared between multiple tabs provided by HTML5. With sharedworker, multiple browser tabs can share a single background thread for cross-page communication and data sharing.
Here's an example of using sharedworker to communicate between multiple tabs:
In a j**ascript file (workerjs).
// worker.js listens for messages in the shared worker selfonconnect = function(event) ;Handling port. when disconnectedonclose = function()Ingest sharedworkers in multiple pages, and communicate with each other:
Page 1var sharedworker = new sharedworker('worker.js');Get the port of the shared workervar port = sharedworkerport;Send a message portpostmessage('message from page 1');Receive message portonmessage = function(event) ;Page 2var sharedworker = new sharedworker('worker.js');Get the port of the shared workervar port = sharedworkerport;Send a message portpostmessage('message from page 2');Receive message portonmessage = function(event) ;In the example above,worker.jsCreate a sharedworker that listens for connection requests from multiple pages and creates a port for each connection. Each page sends and receives messages by creating a sharedworker instance and getting a port object.
Through sharedworker, page 1 and page 2 can communicate across tabs. They can send messages to the shared worker and listen to the messages returned by the shared worker, enabling cross-page data interaction and sharing.
It's important to note that SharedWorker needs to run in a browser that supports SharedWorker, and it needs to run in a server environment, i.e. access the page via HTTP or HTTPS protocols in order to work.
window.postmessage()is a method provided by HTML5 for cross-domain communication between different windows. It can safely send messages to other windows and trigger message events in the receiver window.
Here's a usepostmessage()Example of cross-window communication:
In the window where the message was sent:
Send a message to the target windowpostmessage('hello, world!', '');In the window where the message is received:
Listen for message events windowaddeventlistener('message', function(event) }In the window where the message was sent, usewindow.postmessage()To send a message, the first parameter is the content of the message to be sent, and the second parameter is the origin of the target window, which can be a URL, a domain name, or a wildcard'*'。
In the window where the message is received, by listeningmessageevents, which can capture messages from other windows. In the event handler, passevent.originYou can tell which domain the message is coming from. You can perform security checks as needed to ensure that only messages from the specified domain name are received.
It should be noted thatpostmessage()Typically used for cross-window communication, it is possible to communicate between different windows or different domain names. When using it, you need to ensure that the source of the target window is trustworthy to prevent security breaches. At the same time, the window that receives the message needs to explicitly listen for the message event and process it accordingly.