DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Akash Varma
Akash Varma

Posted on • Updated on

Make javascript to communicate between different tabs

Hello Everyone, I hope you're doing great.

In this article, I'm going to discuss how to communicate between different tabs using Broadcast Channel API.

Broadcast Channel API allows basic communication between browsing contexts(i.e windows, tabs, frames, or iframes) and workers on same origin.

Websites not come under the same origin

Wesbites come under same origin are:

Let's get our hands dirtyπŸš€.

We will try to update heading in all the tabs when user updates heading in one tab.

Create 2 HTML pages and 2 javascript files. Lets say tab1.html, tab2.html, tab1.js, tab2.js. Import tab1.js in tab1.html and same order for tab2. Create a broadcast channel in both js files and should have the same channel names.

const bc = new BroadcastChannel('update-heading');
bc.onmessage = (eventMessage) => {

}
Enter fullscreen mode Exit fullscreen mode

In both HTML pages add a title and in tab1.html add input element so that we can listen to this event and update the value in localstorage.

HTML in tab1 should be

<h1 id="title"> Hello </h1>
<input type="text" id="input" />
Enter fullscreen mode Exit fullscreen mode
const bc= new BroadcastChannel('update-heading');
const title = document.getElementById('title');
const input = document.getElementById('input');
input.onkeyup = (e) => {
    const val = e.target.value;
    title.textContent = 'Hello ' + val;
    localStorage.setItem('title', val);
    bc.postMessage('update-title');
}
Enter fullscreen mode Exit fullscreen mode

On every keypress, we will call a method 'postMessage' in broadcastChannel.
When broadcast posts something, we will listen onmessage method from broadcast. And also updating the title in localStorage. So that in tab2.js, when broadcast onmessage is triggered, we can fetch value from localStorage and update DOM.

In tab2.js

const bc = new BroadcastChannel('update-heading');
const title = document.getElementById('title');
bc.onmessage = (eventMessage) => {
 const val = localStorage.getItem('title');
 title.textContent = 'Hello ' + val;
}
Enter fullscreen mode Exit fullscreen mode

For code, Please visit here .

Broadcast Channel is used for communication between same origin.

If you want to do cross origin communication, you can use window.postMessage() method, where window is the reference object of other domain's window.

Thank you for your time. Have a great dayπŸ™‚.

Top comments (1)

Collapse
 
hackerxp profile image
Γ‰lvio de Sousa

Thank u to sharing this idea but i want use the cross-origin comunication. But when i use the window.postMessage(), it dosenΒ΄t work. So i want sharing the value of localStorage to diferents domains. Like, eg: example1.com and example2.com. Its possible?

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: