Communicate Between Two Tabs of a Browser

Introduction

In this article, you will see how to let two tabs in a browser communicate with each other.

Using this article I will show you how text written on one page of a browser can be automatically updated whenever you change the text on another page.

In this article, we will mainly use the JavaScript and Cookies of the browser.

Step 1

First of all, add two HTML pages to your Visual Studio.

Rename the first of the HTML pages to Transfer and the other one to Collector.

We will first work on the Transfer Page, this will be the page where we will write our message.

Step 2

In the Transfer Page, we will use a TextBox and a Button. The TextBox will the area where we will write our message and the button will be used to reset all the entered information.

On this page, we will create two functions named setCookie and reset information. These functions will help to set the values of the cookies and to reset the TextBox on the click of the button.

Its complete information will be like this:

<h1>Information Transfer</h1>
<p>
Write into the TextBox and after that go to the second page
</p>
<form name="transfer">
<input type="text" name="sendinformation" size="30" value="">
<input type="reset" value="Reset">
</form>
<script type="text/javascript"><!--
function setCookie(value) {
document.cookie = "cookie-msg-test=" + value + "; path=/";
return true;
}
function resetinformation() {
var res = document.forms['transfer'].elements['sendinformation'];
setCookie(res.value);
setTimeout(resetinformation, 100);
}
resetinformation();
//--></script>

Step 3

Now we will work on the second page which is "Collector".

This page will receive the message sent from the first page. On this page, we will just have a TextBox that will work as a receiver of the message.

On this page again we will create two the functions "getCookie" and "resetinformation". getCookie will be used to get the Cookies and resetinformation will be used to reset the value of TextBox.

Its complete code will be like this:

<h1>Information Collector</h1>
<p>Watch the text appear in the text box below as you type it in the sender.</p>
<form name="collectmessage">
<input type="text" name="collectnewmessage" size="30" value="" readonly disabled>
</form>
<script type="text/javascript"><!--
function getCookie() {
var y = "cookie-msg-test=";
var spl = document.cookie.split(';');
for (var z = 0; z < spl.length; z++) {
var x = spl[z];
while (x.charAt(0) == ' ') x = x.substring(1, x.length);
if (x.indexOf(y) == 0) {
return x.substring(y.length, x.length);
}
}
return null;
}
function resetinformation() {
var text = getCookie();
document.forms['collectmessage'].elements['collectnewmessage'].value = text;
setTimeout(resetinformation, 100);
}
resetinformation();
//--></script>

Step 4

Now when we run these pages you will get the output something like this:

Initially

Initially, Sender is empty so the Receiver is also empty:

Enter Something in TextBox

When we enter something in the sender then the receiver automatically receives it.

Reset Button

If you reset the First Page by clicking on the Reset Button then you can see the second page is reset automatically.