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.
