Inter-Window Communication Details | JavaScript: The Complete Reference, Second Edition

For applications that have multiple windows launched, it is especially important to understand the basics of communicating between windows . Normally, we access the methods and properties of the primary window using the object instance named simply window, or we even omit the reference. However, if we want to access another window we need to use the name of that window. For example, given a window named mywindow, we would write content to it using mywindow.document.write . The key to communication between windows is knowing the name of the window and then using that in place of the generic object reference window . Of course, there is the important question of how you reference the main window from a created window? The primary way is using the window. opener property that references the Window object that created the current window. The simple example here shows how one window creates another and each is capable of setting the background color of the other.

 <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html xmlns="http://www.w3.org/1999/xhtml">> <<head>> <<title>>Window Tester<</title>> <<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />> <<script type="text/javascript">> <<!-- function createWindow() {   secondwindow = window.open('','example','height=300,width=200,scrollbars=yes');     if (secondwindow != null)     {        var windowHTML= "<<html>><<head>><<title>>Second Window<</title>><</head>>";        windowHTML += "<<body>><<h1 align='center'>>";        windowHTML += "Another window!<</h1>><<hr>><<div align='center'>><<form action='#'  method='get'>>";        windowHTML += "<<input type='button' value='Set main red'  onclick='window.opener.document.bgColor=\"red\";' />>";        windowHTML += "<<br >><<input type='button' value='CLOSE'  onclick='self.close();' />>";        windowHTML += "<</form>><</div>><</body>><</html>>";        secondwindow.document.write(windowHTML);        secondwindow.focus();     } } //-->> <</script>> <</head>> <<body>> <<form action="#" method="get">> <<input type="button" value="new window" onclick="createWindow();" />> <<input type="button" value="set red" onclick="if (window.secondwindow)  {secondwindow.document.bgColor='red';secondwindow.focus();}" />> <</form>> <</body>> <</html>>

Now that we see how to control data interchange between windows, it is important to reiterate a few points. First, avoid using document.write() on secondary windows unless you plan on overwriting all the content in such a window. You must use DOM methods or proprietary objects like document.all[] to modify content in place. Second, make sure not to create too many sub-windows and keep their purpose clear. Most visitors to your site probably won t be accustomed to a site that spawns many sub-windows outside the dreaded pop-up advertisement and may in fact have software or browser settings tuned to shut spawned windows down. Last, make sure you understand the JavaScript security policy of the same origin and its relationship with windows. The policy states that you cannot access windows that are not local to your site and conversely other sites should not be able to access your windows. However, security can be somewhat tricky with JavaScript, so make sure you read Chapter 22 if this idea sounds disturbing .