JavaScript & HTML Tips
 
Feature highlight: Window Interactions
Credit: Imagenation

Description
Using setTimeOut() to control a Scrolling Message which terminates itself

Key features and JavaScript elements
Windows popping unrequested are like email Spam, becoming the scourge of the Internet. However, it is important to know how to control the interactions between Windows - particular a parent and child in legitimate situations - the user wants to return to a window without closing the child and then be able to comeback with a button press. See how below.

Select a color for a new window:
Red Yellow Blue Green White Cyan Magenta Orange
This field will be filled from an entry in the other window:


There is lots to cover here so lets start with the code to open the Window. First, if the Window is already open all we want to do is bring it to the foreground; otherwise we go and open jstagteam.htm as follows:

var myWind = ""
function doNew() {
  if (myWind == ""l || myWind.closed || myWind.name == undefined) {
    myWind = window.open("jstagteam.htm","subWindow","HEIGHT=200,WIDTH=350")
  } else{
    myWind.focus();
  }
}

Note in the function we check for three states of the Window - if it is blank, if it is closed or if its name is undefined. Triple redundancy like this is required because of browser inconsistency in treatment of the windows object. Alternately users can maintain an array of names of If it does not exist then we want to open it. Now thee window.open() routine is also very important. Here is how it works:

myWin = window.open(file_url, name, window_option_settings);

First, always assign a window opening to a variable - thats your means of controlling it later. Second, always include all three parameters - unless you want to do some horrendous debugging. Third, the window_option_settings should have no embedded blanks. The table at the bottom of this page lists the options that work with both browsers. The following are some samples:

awin = window.open("", "", "width=200,height=200"); //creates an empty 200xx200 window
bwin = window.open("", "Me", "top=30,left=30"); //creates a named window, Me, at 30, 30
cwin = window.open("Wins.htm", "Wins", "resizable"); // opens Wins.htm making it resizable

Now the file name or URL is where the browser will look to find the new window to open as in the case of cwin just above. . However, if the file argument is left blank, " ", then the browser will create an empty window and give it the name supplied in the second argument - as in bwin example. And finally the first case will create a completely empty window. But you can fill it up with content like so:

awin.document.write("<html><body><hr>My Window - Hello World<hr><script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-4281076-1"); pageTracker._initData(); pageTracker._trackPageview(); </script><script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-4281076-1"); pageTracker._initData(); pageTracker._trackPageview(); </script></body>,/html>");
awin.close(); awin.focus(); //close and bring awin to the foreground

The next set of code of interest is what happens in the created window. Three things. First it steals its background color from the Main window. Second it finds the name of the Main window and prints it in a popup. Third it passes input from its window back to the Main Window. Not too shabby. Let see how in reverse order.

<INPUT TYPE="text" SIZE=25 onChange="self.opener.document.forms[0].entry.value = this.value">

The critical line is the onChange=... The onChange event gets triggered when an input textfield is changed. But note VB programmers - the event does not get triggered until the input field loses focus(unlike in VB which reacts to every typed in character). Just as important is the one line JavaScript, here is how to interpret that hefty line.

self works like "this" in Java and other languages, it refers to the window being currently used. But self.opener refers to the window that opened this one - the parent or Main window. document.forms[0] refers to the first form in the Main Window (this page, in fact). And entry.value refers to the name of the inpout text field in this window. So jstagteam.htm passes a value back to its calling Web page, this page. Now just think of how this can be generalized. A user fills in a detail form - and then passes the key fields for display back in the main window. the opportunities for between page transfer of data are only limited by the lack of support for a consistent DOM and/or JavaScript model of the document, images, and other HTML tag elements among the browsers.

<INPUT TYPE="button" VALUE="Title for Main Window ?" onClick="alert(self.opener.document.title)">

To explain thhe second feature, displaying from the 2nd window, the title of the main window is actually easy to do. Just as before self.opener refers back to the window that called or opened this one. document.title refers to the Main window's title - and the alert() just packages it up in a convenient browser popup message window.

This gives a glimpse at alternatives to cookies, XML, and global data arrays for passing information between windows using JavaScript. Finally, how the background color is passed to the second window is left as an exercise to the reader. Best explanation gets attached to this note and no-prized.

Finally here is a summary of the common Windows options that can be set on opening or creating a new window from JavaScript regardless of browser used.

Table 1 - A Summary of Window Options Available in Netscape and IE Browsers
Option Value Description
height Number Sets the window's height value.
left Number Tthe window will be positioned N pixels from the screen's left edge.
location Yes/No The location or address bar will be present.
menubar Yes/No The menubar will be present..
resizable Yes/No The window becomes resizable.
scrollbars Yes/No Toggles whether scroll bars are displayed or not.
status Yes/No Toggles use of the status bar.
toolbar Yes/No Toggles display of a toolbar with the menus
top Number The top edge of the window will positioned N pixels from the top edge of the screen.
width Number Sets the window's width value.
 
Top of Page  Tutorials Home  JavaScript References  JavaScript Books