Post
Ask Question

Communicate Between Two Browsers

Introduction

 
In this article, you will see how to let two browser windows communicate with each other.
 
Through this article, I will show you how to show the text written in one browser window to another browser window. You will see that we can chat within two browser windows.
 
In this article, we will mainly use JavaScript and jQuery.
 
Step 1
 
First of all, add two HTML pages to your Visual Studio.
 
Rename the first of the HTML pages to MainPage.htm and the other one to RecieverPage.htm.
 
We will first work on the MainPage.htm, this will be the page that will first run and will help us to open the second browser window.
 
browser5.jpg
 
Step 2
 
After adding the page the first thing to do is to add a jQuery file named "jquery.windowmsg-1.0.js". You can add this file by downloading the Zip file provided previously.
On the MainPage.htm we will add two TextBoxes and three Buttons. The Textboxes will be used to communicate within the browsers and the buttons will be used to open the receiver window and to send the message.
 
It's code will be like this:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3.   
  4.      <head>  
  5.           <title></title>  
  6.           <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js" type="text/javascript"></script>  
  7.           <script src="jquery.windowmsg-1.0.js" type="text/javascript"></script>  
  8.           <script type="text/javascript">  
  9.           $(function() {  
  10.   
  11.                $.initWindowMsg();  
  12.   
  13.                var secondwindow;  
  14.                $('#clickbutton').click(function() {  
  15.                     secondwindow = window.open('Recieverpage.htm', 'child', "width=400, height=400, location=no, menubar=no, scrollbars=no, status=no, toolbar=no");  
  16.                     if (window.focus) { secondwindow.focus() }  
  17.                });  
  18.   
  19.                $('#sendbutton').click(function() {  
  20.                     value = $('#textbox1').val();  
  21.                     $.triggerWindowEvent(secondwindow, "parentMsg1", value);  
  22.                });  
  23.                $('#sendbutton2').click(function() {  
  24.                     value = $('#textbox2').val();  
  25.                     $.triggerWindowEvent(secondwindow, "parentMsg2", value);  
  26.                });  
  27.   
  28.                $.windowMsg("childMsg1", function(message) {  
  29.                     $('#textbox1').val(message);  
  30.                });  
  31.                $.windowMsg("childMsg2", function(message) {  
  32.                     $('#textbox2').val(message);  
  33.                });  
  34.   
  35.           });  
  36.           </script>  
  37.      </head>  
  38.   
  39.      <body>  
  40.           <h1>  
  41.                This is Main Window  
  42.           </h1>  
  43.           <p>  
  44.                Click on the Button to open another Window and then start typing your message in it.  
  45.           </p>  
  46.           <form>  
  47.                <input id="clickbutton" type="button" value="Click to Open Window"></input>  
  48.                <p>  
  49.                     <input id="textbox1" type="text" value=""></input>  
  50.                     <input id="sendbutton" type="button" value="send"></input>  
  51.                </p>  
  52.                <p>  
  53.                     <input id="textbox2" type="text" value=""></input>  
  54.                     <input id="sendbutton2" type="button" value="send"></input>  
  55.                </p>  
  56.           </form>  
  57.           <form name="newform">  
  58.                <input type="hidden" name="newformEvent" value="childMsg2"></input>  
  59.                <input type="hidden" name="newformData" value="hi"></input>  
  60.                <input id="button3" type="button" style="display:none" value="" name="newformButton"></input>  
  61.           </form>  
  62.      </body>  
  63.   
  64. </html> 
Its output will be like this:
 
browser6.jpg
 
Step 3
 
Now we will proceed to the second page, which is "ReceiverPage.htm".
 
On this page, we will add two Textboxes and two buttons that will help us to send the reply to the first browser window's messages.
 
Its code will be like this:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3.   
  4.   <head>  
  5.     <title>  
  6.       WindowMsg test  
  7.     </title>  
  8.     <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js" type="text/javascript"></script>  
  9.     <script src="jquery.windowmsg-1.0.js" type="text/javascript"></script>  
  10.     <script type="text/javascript">  
  11.     $(function() {  
  12.       $.initWindowMsg();  
  13.       $('#button1').click(function() {  
  14.         value = $('#in1').val();  
  15.         $.triggerParentEvent("childMsg1", value);  
  16.       });  
  17.       $('#button2').click(function() {  
  18.         value = $('#in2').val();  
  19.         $.triggerParentEvent("childMsg2", value);  
  20.       });  
  21.   
  22.       $.windowMsg("parentMsg1", function(message) {  
  23.         $('#in1').val(message);  
  24.       });  
  25.       $.windowMsg("parentMsg2", function(message) {  
  26.         $('#in2').val(message);  
  27.       });  
  28.     });  
  29.     </script>  
  30.   </head>  
  31.   
  32.   <body>  
  33.     <h1>  
  34.       Child window  
  35.     </h1>  
  36.     <p>  
  37.       Use the form below to send messages back to the parent  
  38.     </p>  
  39.     <form>  
  40.       <p>  
  41.         <input id="in1" type="text" value=""></input>  
  42.         <input id="button1" type="button" value="send"></input>  
  43.       </p>  
  44.       <p>  
  45.         <input id="in2" type="text" value=""></input>  
  46.         <input id="button2" type="button" value="send"></input>  
  47.       </p>  
  48.     </form>  
  49.     <form name="newform">  
  50.       <input type="hidden" name="newformEvent"></input>  
  51.       <input type="hidden" name="newformData"></input>  
  52.       <input id="button3" type="button" style="display:none" value="" name="newformButton"></input>  
  53.     </form>  
  54.   </body>  
  55.   
  56. </html> 
Step 4
 
Now all the code is done, it's time to run the application.
 
Run the first page, in other words, "MainPage.htm".
 
All the Textboxes will be empty initially, click on the button to open the second window.
 
browser6.jpg
 
On clicking the button a new browser window will be opened, initially both "MainPage.htm" as well as "RecieverPage.htm" will be empty.
 
browser7.jpg
 
Now type your message on the first TextBox of MainPage.htm and click on the Send button. On click, you will see the same Text displayed in the first TextBox of the second browser window.
 
browser8.jpg
 
Now type a reply to this message in the second TextBox of the second browser window and click on the Send button. This data will then be displayed in the second TextBox of the first browser window.
 
browser9.jpg


Similar Articles