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.
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.
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.
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.