Easy Inter-window Communications with jQuery
It may happen that you need to open a second browser window to help your web application perform some additional action that you don’t want to leave your current page to do. Sure, there are all kinds of “light box” and “modal div” pop-up solutions, but it might also be the case that you want the two windows to be able to continue to operate “independently,” but still have some level of interoperability. This article doesn’t discuss the pros or cons of either method, but does use this snippet of HTML to show how easy it is to do.
<html>
<head>
<title>Window Opener Chatter</title>
<style>
input[type=text] {
width: 20em;
}
#haveParent,#haveChild,#chatArea {
display: none;
}
#chatArea {
border: thin solid grey;
height: 15em;
overflow: auto;
width: 20em;
}
.childSays {
color: green;
}
.parentSays {
color: blue;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var child = null;
$(function() {
$("#openAnother").click(function(e) {
e.preventDefault();
child = window.open(location.href);
$("#openAnotherDiv").hide();
$("#haveChild,#chatArea").show();
$("#childChatter").submit(function(e) {
e.preventDefault();
var newP = "<span class='parentSays'>"
+ $("#childMessage").val()
+ "</span><br/>";
$("#chatArea",child.document).append( newP );
$("#chatArea").append( newP );
$("#childMessage").val("").focus();
});
});
if( window.opener ) {
$("#haveParent,#chatArea").show();
$("#parentChatter").submit(function(e) {
e.preventDefault();
var newP = "<span class='childSays'>"
+ $("#parentMessage").val()
+ "</span><br/>";
$("#chatArea",window.opener.document).append( newP );
$("#chatArea").append( newP );
$("#parentMessage").val("").focus();
});
}
});
</script>
</head>
<body>
<div id="openAnotherDiv">
<a href="#openAnother" id="openAnother">Open Another Window</a>
</div>
<div id="haveChild">
<span>I have a child!</span>
<div>
<form id="childChatter">
<input type="text" id="childMessage">
<input type="submit" value="Say">
</form>
</div>
</div>
<div id="haveParent">
<span>I have a parent!</span>
<div>
<form id="parentChatter">
<input type="text" id="parentMessage">
<input type="submit" value="Say">
</form>
</div>
</div>
<div id="chatArea"></div>
</body>
</html>
The page opens with a only a simple link visible. A simple jQuery binding to the link’s click event will change it from jumping to a new URL (in this case a named anchor) to open a child window, and at the same time makes the chat form and display divs visible.
When that child window opens, it checks to see if it was opened by another window (as did the original window). The standard JavaScript value of window.opener is populated with a context handle to that parent. If this value is populated, the child window will open its chat form and display divs. The child window also has a link to open a new child as there is no reason a child window can’t also have children, although there i no default visibility to grandparents or grandchildren, though.
Filling in the chat form text box and clicking the “say” button will insert the message into that window’s chat box. It will also send the message to that windows child or parent (depending on the form used). There is no messaging to grandparent or grandchildren windows, although that would be pretty easy to do, too.
The simple example inserts the message into a div, but could be used for many other jQuery or JavaScript uses. Notice that the window hosting the event (the one in which the “say” button is clicked) is affecting the other window’s content. There could be other bindings as the jQuery context selector, which in one case is $(“#chatArea”, child.document), is just another selector; as long as it’s found, you can do all of the jQuery goodness you need to do to it. Beware, though, that the scope of the script is tricky to juggle as you affect the other document’s DOM.
This example doesn’t watch for the closing of a child or parent, which could be done with messaging or binding events, so closing a window doesn’t change the view of its parent or child windows. It also doesn’t handle multiple children, although that should be simple enough by storing the child value differently, say in the form’s data, and changing the way the message text is grabbed from the form field, so it isn’t using an ID.
About the Author
Helped me a lot, thanks!!
That was awesome, thanks. I was looking for a tutorial that explained inter-window communication using jQuery and this example was clear and concise.