There are many use cases we encounter where we want to share the data between two different tabs or windows that are on the same domain.
For example, there is a single sign-on (SSO) login button, where the user clicks on the button, a new tab is opened and then the user performs the login on this new window after successful login this window is closed and the previous window is refreshed.
This previous window is refreshed, only when the new window shares the data with it after the login.
Using the same example let us see how we can implement this data sharing between windows.
Create two HTML files named home
and login
and a single Javascript file named index.js
. Import this JavaScript file in both HTML files.
In the home.html
create a button with the text login
that will open the login.html
in the new tab.
Add another button with the text send message to Login
on whose click we will send some dummy message to the login window.
<!-- home.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home</title> </head> <body> <h1>Hello, this is the Home page.</h1> <button onclick="openLogin()">Open Login</button> <button onclick="sendMsgToLogin()">Send message to Login</button> <script src="./index.js"></script> </body> </html>
In the login.html
create a button with the text submit
on whose click we will send a message to the home.html
after a delay and close this window.
<!-- login.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Login</title> </head> <body> <h1>Hello, this is the login page.</h1> <button onclick="sendMsgToHome()">Submit</button> <script src="./index.js"></script> </body> </html>
Now if you notice, in both the HTML pages we are invoking the functions on the button click.
For example on submit
button click in the login.html
we are invoking sendMsgToHome()
.
Similarly, in the home.html
on the Open Login
button click we are invoking the openLogin()
function, and on the Send message to Login
button click we are invoking the sendMsgToLogin()
function.
Let’s define these functions in the index.js
. As this is the common js file shared between both, we can program it as per our use case.
let loginWindow; const openLogin = () => { loginWindow = window.open("login.html", "_blank"); }; const sendMsgToLogin = () => { loginWindow.postMessage({ login: "Hello from Home" }, "*"); }; const sendMsgToHome = () => { window.opener.postMessage({ home: "Hello from Login" }, "*"); setTimeout(() => { window.close(); }, 2000); }; window.addEventListener("message", (event) => { if (event.data?.home) { console.log("Home page received a message", event.data?.home); } if (event.data?.login) { console.log("Login page received a message", event.data?.login); } });
The first method is the openLogin()
that opens the login.html
in the new tab and we store its instance in a variable named loginWindow
so that we can control the new window.
In the sendMsgToLogin()
if you notice, we are sending the message to the login.html
and we are using the window: message event, to listen to the event.
This event is fired whenever a window receives a message. Inside this, based on the values received, we are logging the appropriate data.
In the sendMsgToHome()
we are posting a message back to the window that has opened the current window window.opener.postMessage()
because login.html
is opened by home.html
we are sending the message from the login
to home.
And then we close the login.html
after a delay of 2 seconds.