Communicating between two browser windows using jquery and custom events

By Murali Takalpati | December 3, 2012

Today I wanted to share my experience writing a communication mechanism between two browser windows. I had a need to pass data between the two windows, so I came up with this solution using jQuery triggers and custom events.

This is the code I needed in the main window

<head>
<title>Untitled Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
var childWindow;

$(document).bind('mainWindow', function(e, message){
$("#mainMessage").val(message);
});

$("#Button1").click(function(){
childWindow = window.open('ChildWindow.htm', 'child', "width=500, height=500, location=no, menubar=no, scrollbars=no, status=no, toolbar=no");

});

$("#mainButton").click(function(){
childWindow.$(childWindow.document).trigger('childWindow', $("#mainMessage").val());
});
});

</script>

</head>
<body>
<input type="text" id="mainMessage" />
<input type="button" value="Send Message to Child Window" id="mainButton"/>

<input type="button" value="Open Child Window" id="Button1"/>
</body>
</html>

First, we are referencing jquery from the Google CDN, then created a custom event called mainWindow, by triggering this event from the child event, we get the message from the child window.
We have a text input element and button to pass the message to the child window. Also we have code to pass data to the child window, we are triggering the custom child event called childWindow and passing in the data from the input box in the Main Window. The only tricky part here was the way we reference the child window to trigger the event.

Here is the code for the child window

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
$(document).bind('childWindow', function(e, message){
$("#childMessage").val(message);
});

$("#childButton").click(function(){
window.opener.$(window.opener.document).trigger('mainWindow', $("#childMessage").val());
});
});

</script>


</head>
<body>
<input type="text" id="childMessage" />
<input type="button" value="Send Message to Main" id="childButton"/>
</body>
</html>

In the child window again we have a text input element and button. We create a new custom event called childWindow and code to pass the message to the Main Window, this is done by triggerring an event in the main window.

Here is what I learned during this task, as long as we pass strings, it works great. I had a need to pass a complex json object between the two windows, passing json directly between the windows will mess up some information in the JSON object. The solution I used was to stringify ( JSON.stringify) the json object while passing and then reconstructing the json object by using parse ( JSON.parse ). One other issue with passing json is stringify does not convert the functions, so found this solution JSONFN, which can stringify and parse json.

This is one way to do it, but there is window.postMessage which is a more elegant solution, but all browsers do not support it right now. If using HTML5, could be done by Web Sockets. Also I found solutions using cookies to store and retrieve information.

Hope this post helps someone looking for a similar solution.

Please let me know if there are other solutions using comments, it will help me as well as the community to understand and learn this concept better.

Please share/like this blog post if you enjoyed reading it as I do not get paid for blogging.

Happy Coding!

Did you like this? Share it:

Leave Your Comment

Your email will not be published or shared. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>