Did you know you can send information between open browser tabs using JavaScript?
Let's say your user is viewing your site with multiple tabs and something happens one tab which you want to react to on the other tabs - you can do this using the Broadcast Channel API.
Before we start, I want to mention that this only works between browsing contexts on the same origin.
Browser Support
Please also check browser support before using this API. As of July 2020, it doesn't appear to be supported by Safari. Please see the Can I Use... link here
Sending Data
To send something to another tab, we need to first create a new BroadcastChannel
instance. This is super easy, and looks like this:
const channel = new BroadcastChannel("my-channel");
Notice how we passed in my-channel
- this is the name of the channel which we are subscribing to. When subscribing to a channel, you're then able to post and receive messages from it.
Speaking of posting messages, let's do that right now:
channel.postMessage("Hey, how's it going mate? I'm from a different tab!");
We can send multiple different kinds of objects with the postMessage
method, for example:
// array
channel.postMessage([5, 10, 15, 20]);
// object
channel.postMessage({ name: "Dom", age: 30 });
// blob
channel.postMessage(new Blob(["sample text"], {
type: "text/plain"
}));
Receiving messages
Now, on the second tab, we can listen for and receive those messages. Open up a new tab (on the same origin, i.e. localhost
) and include this code:
// subscribe to the same channel, "my-channel"
const channel = new BroadcastChannel("my-channel");
channel.addEventListener("message", e => {
console.log(e.data);
});
Once this code is included, open up both the tabs, then refresh the original one (the one doing the posting), and you should see the data appearing in the console.
It's that easy! You simply listen for the message
event and once you have it, access the data with the data
property.
Video Tutorial
If you prefer a video version of the above tutorial, you can view it on my YouTube channel, dcode:
Enrol Now 👉 JavaScript DOM Crash Course
If you're learning web development, you can find a complete course on the JavaScript DOM at the link below 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
Top comments (11)
I had to implement a similar thing before for a chat application where we stored the chat state in local storage. I went with the
window.addEvenLister('storage')
approach because I had to support IE 11 and Safari.Hope
BroadcastChannel
will get more support on older browsers, it seems nice and simple. :)I made a tiny cross-browser lib (github.com/vitkarpov/tabs-channel) for that. Works even on different domains.
Better than listening to changes on local storage, nice article, thanks.
Sounds like this could be useful for communication between an iframe and its parent window too...
Yep! You can use it to communicate between those as well
The biggest issue is that it does not work with Safari (as you linked). Data sharing between tabs on mobile would not happen often, but on Safari MacOS this solution is a problem.
With some tricks you can use localStorage to achieve a similar effect.
It's probably best I add that to the post, cheers
I've created an JS library that abstracts that away. It uses both broadcastChannel and localStorage. And it has an API for cross-domain communication as well sysend.js. It also works in IE 11, that has some issues (as always).
Hey Dom!
Great article, I wrote something similar last year that you may be interested in as well!
dev.to/naismith/cross-tab-communic...
Nice article - love the live previews
Interesting feature. I suppose a standard messaging API across different contexts makes communication easier compared to trying to find a way to hack things together.