12.3 Handling a Window or Frame Event

A window is the main Web page, unless it is divided up into frames. There are a number of events that will affect windows and frames ; these are described in Table 12.3. The following examples illustrate some of the events that affect windows and frames.

Table 12.3. Window and frame events.

Event Handler	When It Is Triggered
onBlur	When the mouse moves away from the window or frame and it loses focus
onFocus	When the mouse is clicked or moved in a window or frame and it gets focus
onLoad	When a document or image has finished loading
onMove	When a window is moved ^[a]
onUnLoad	When a page is exited or reset

^[a] The onMove event handler in Netscape Navigator 4.0 is enabled only for the window object.

12.3.1 The onLoad and onUnLoad Events

The onLoad event handler is invoked when a document, its frameset, or images have completely finished loading. This includes the point at which all functions have been defined and scripts have been executed, and all forms are available. This event can be helpful in synchronizing the loading of a set of frames, particularly when there may be large images that need to be loaded or all of the frame data hasn't arrived from the server.

The onUnLoad event handler is invoked when the page is exited or reset.

Example 12.5

 <html><head><title>Mouse Events</title> 1   <script language="JavaScript"> 2       var sec=0; 3  function now()  {            var newdate= new Date();            var hour=newdate.getHours();            var minutes=newdate.getMinutes();            var seconds=newdate.getSeconds();            var timestr=hour+":"+minutes+":"+seconds; 4  window.setInterval("trackTime()", 1000);  5          alert("Your document has finished loading\n"+                  "The time: "+timestr);         } 6       function trackTime(){ 7           sec++;         } 8       function howLong(){            alert("You have been browsing here for "+ sec+" seconds");         }     </script>     </head> 9  <body background="blue hills.jpg" onLoad="now();"  10  onUnLoad="howLong();">  <font face="arial,helvetica" size=5>     When you leave or reload this page, <br>an alert dialog box     will appear.     </body>     </html>

EXPLANATION

The JavaScript program starts here.
A global variable called sec is declared.
The user -defined function now() contains several of the Date object's methods to calculate the time. This function is used to keep track of how long the user browses from the time the page is loaded until it is exited.
The window object's setInterval() method is set to call the function trackTime() every 1,000 milliseconds (one second) starting when the document is loaded until it is unloaded.
The alert dialog box pops up when the page finishes loading.
This is a user-defined function that keeps track of the number of seconds that have elapsed since the page was loaded.
The variable called sec is increased by one each time trackTime() is called.
This function is called when the page is exited or reloaded. It is the event that is triggered by the onUnLoad handler on line 10.
When the document has finished loading, the onLoad event handler is triggered. The onLoad event handler is an attribute of the <body> tag. The event handler is assigned a function called now() that sets up a timer that will go off every second while the page is opened. After a second passes another function called trackTime() will keep updating a variable that stores the number of seconds that have elapsed. The background attribute of the HTML <body> tag is set to an image of blue hills.
The onUnLoad event handler is triggered when the user either leaves or reloads the page. See Figure 12.5.

Figure 12.5. If you exit, or press the reload button, this alert box appears.

12.3.2 The onload() and ununload() Methods

The onload() method, window.onload() , simulates the onLoad event handler. The ununload() method, window.ununload() , simulates the behavior of the onUnload event handler. All JavaScript event methods must be in lowercase, such as onload() or ununload() . The event handlers themselves , used as HTML attributes, are not case sensitive, so ONUNLOAD, onUnLoad , and onunload are all acceptable.

12.3.3 The onFocus and onBlur Event Handlers

When an object has the focus, it is waiting for the user to do something, such as press a button, click on a link, start or stop an animation. If you are moving between frames, the frame where the mouse is pointing has the focus, and when the cursor moves out of the frame, it loses focus or is "blurred." The onFocus event handler allows you to initiate a window or frame type function when the mouse is moved into a window, and the onBlur event handler is triggered when you leave a window or frame. When a window has focus, it becomes the top window in a stack of windows. The following example changes the background color of the left frame to pink when it goes into focus and to yellow when it goes out of focus. The status bar at the bottom of the window reflects what frame has the focus.

Example 12.6

 <html>     <head><title>Frame Me!</title></head> 1   <frameset cols="25%,75%"> 2       <frame src="leftfocus.html" name="left"> 3       <frame src="rightfocus.html" name="right" >     </frameset>     </html> ----------------------------------------------------------------------     <!-- The right frame file -->     <html> 4   <head><title>Right Frame</title></head> 5       <body bgColor="lightblue">     <font face="arial" size=4> right frame<br>     </body>     </html> ----------------------------------------------------------------------     <html>     <head><title>Left Frame</title> 6   <script language="JavaScript"> 7  function focus_on_me()  {             document.bgColor="pink";   //  Current doc is the left frame  8           window.status="focus leftframe";         } 9  function defocus_me()  {            parent.left.document.bgColor="yellow";   //  Another way to  //  reference  10         window.status="focus rightframe";    //  See the status bar  }     </script>     </head> 11  <body onFocus="focus_on_me()"  //  Event handlers  12  onBlur="defocus_me()"  bgColor="lightgreen">  <image src="signs.jpg">  </body>         </html>

EXPLANATION

In this example, there are three files involved with frames. This is the HTML file that defines the frameset. It consists of a main window divided into two frames, a left frame consisting of 25 percent of the window, and right frame consisting of 75 percent of the window.
The left-hand frame's source code is in a file called leftfocus.html .
The right-hand frame's source code is in a file called rightfocus.html .
This HTML document is the content for the right-hand frame.
The background color of the right-hand frame is lightblue .
This is the start of the JavaScript program found in the file called leftfocus.html .
This user-defined function, called focus_on_me() , is called when the onFocus event handler is triggered; that is, when the user's cursor has focus in that window. It assigns a pink background color to the left-hand frame by going down the JavaScript hierarchy: parent.left.document.bgcolor .
The status bar in the window is assigned the string "focus leftframe" . Look in the status bar.
This user-defined function, called defocus_me , is called when the onBlur event handler is triggered; that is, when the user's cursor loses focus in that window. It assigns a yellow background color to the right-hand frame by going down the JavaScript hierarchy: parent.right.document.bgcolor .
The status bar in the window is assigned the string "focus rightframe" . Look in the status bar.
An onFocus event handler is assigned to the <body> tag for the file called leftfocus.html . As soon as focus goes into this window (frame), the handler's function called focus_on_me() is called.
An onBlur event handler is assigned to the <body> tag for leftfocus.html . When focus leaves this frame (i.e., the user clicks his mouse in another window), the function called defocus_me() is called. The output is shown in Figure 12.6.

Figure 12.6. When focus is on the left frame, it turns pink. When focus leaves the left frame, it turns yellow. Notice the mouse pointer is in the right frame. That's where the focus is. Check the status bar.

12.3.4 The focus() and blur() Methods

The focus() and blur() methods behave exactly the same as their like-named events. These methods are applied to an object, such as a window or form object, and are called from the JavaScript program. When the focus() method is applied to an object, it will cause that object to be in focus and when the blur() method is applied to an object, it will lose its input focus.

Example 12.7

 <html>     <head><title>The focus and blur methods</title>     <script language="JavaScript"> 1       function newWindow(){ 2  winObj=window.open  ("summertime.jpg",             "summer","width=650,height=200,resizable=yes,             scrollbars=yes,location=yes"); 3           winObj.moveTo(0,0);   //  Move to left-hand corner of screen  4  winObj.focus();  //  New window gets the focus  //windObj.blur();         } 5       function closeWindow(){ 6  winObj.close();  //  Close the new window  }     </script>     </head>     <body bgColor="lightgreen">     <h2>Summer Scene from the Old Country</h2>     <form>         <input type=button             value="Open Window" 7  onClick="javascript:newWindow();">  <input type=button             value="Close Window" 8  onClick="javascript:closeWindow();">  </form>     </body>     </html>

EXPLANATION

A user-defined function, called newWindow() , will create a new window object with the window object's open() method, specified with a number of options to further define the window.
The new window object is an image called summertime.jpg .
The new window is moved to the left-hand corner of the screen, pixel position (0,0).
The new window gets focus. It will be on top of all the other windows.
This user-defined function is responsible for closing the new window.
The close() method of the window object causes the new window to be closed.
When the user clicks this button, the onClick event handler is triggered, and a new window will be opened.
When the user clicks this button, the onClick event handler is triggered, and the new window will be closed. The output is shown in Figures 12.7 and 12.8.

Figure 12.7. The parent window.

Figure 12.8. The new window is in focus and will appear on top of its parent window.

Table 12.3. Window and frame events.

12.3.1 The onLoad and onUnLoad Events

Example 12.5

Figure 12.5. If you exit, or press the reload button, this alert box appears.

12.3.2 The onload() and ununload() Methods

12.3.3 The onFocus and onBlur Event Handlers

Example 12.6

Figure 12.6. When focus is on the left frame, it turns pink. When focus leaves the left frame, it turns yellow. Notice the mouse pointer is in the right frame. That's where the focus is. Check the status bar.

12.3.4 The focus() and blur() Methods

Example 12.7

Figure 12.7. The parent window.

Figure 12.8. The new window is in focus and will appear on top of its parent window.