Window Loading and Unloading | Inside JavaScript

As you know, you have to be careful in JavaScript about accessing page elements that have not yet been loaded. For example, trying to write to the <BODY> of a page from the <HEAD> might cause problems, because the body might not be loaded yet:

 <HTML>      <HEAD>          <TITLE>              Writing to a Web page          </TITLE>  <SCRIPT LANGUAGE="JavaScript">   <!--   document.write("Hello!")   // -->   </SCRIPT>  </HEAD>      <BODY>          <H1>Writing to a Web page</H1>      </BODY>  </HTML>

One solution is to embed the script in the <BODY> of a page:

 <HTML>      <HEAD>          <TITLE>              Writing to a Web page          </TITLE>      </HEAD>      <BODY ONLOAD="writer()">          <H1>Writing to a Web page</H1>  <SCRIPT LANGUAGE="JavaScript">   <!--   document.write("Hello!")   // -->   </SCRIPT>  </BODY>  </HTML>

Another solution is to use the window object's onload and onunload events. The onload event occurs when a window is fully loaded (after all elements have been fully loaded and are running) and the onunload event occurs just before a window is removed from the screen. You can assign an event handler to those events using the <BODY> or <FRAMESET> elements, and the event handler will be attached to the corresponding window object's event. Here's how that looks in code targeted to IE5+ and NS6+:

 <HTML>      <HEAD>          <TITLE>              Writing to a Web page          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function writer()   {   document.write("Hello!")   }  // -->          </SCRIPT>      </HEAD>  <BODY ONLOAD="writer()">  <H1>Writing to a Web page</H1>      </BODY>  </HTML>

And there's another option in the Internet Explorer 4+ (only)you can use the <SCRIPT FOR> element, which we saw in Chapter 1:

 <HTML>      <HEAD>          <TITLE>              Writing to a Web page          </TITLE>  <SCRIPT FOR="window" EVENT="ONLOAD" LANGUAGE="JavaScript">   <!--   document.write("Hello!")   // -->   </SCRIPT>  </HEAD>      <BODY>          <H1>Writing to a Web page</H1>      </BODY>  </HTML>

Tip

Internet Explorer 4+ also has another event that is of interest: onbeforeunload , which occurs before the unloading process starts.

You also can use the onload and onunload events with the <FRAMESET> element in the Internet Explorer, like this:

 <HTML>      <HEAD>          <TITLE>Working With Frames</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function alerter()   {   window.alert("All loaded.")   }  // -->          </SCRIPT>      </HEAD>  <FRAMESET COLS = "55%, 45%" ONLOAD="alerter()">  <NOFRAMES>Sorry, your browser does not support frames!</NOFRAMES>          <FRAMESET ROWS = "35%, 45%, 45%">              <FRAME SRC="frame1.html">              <FRAME SRC="frame2.html">              <FRAME SRC="frame3.html">          </FRAMESET>          <FRAMESET ROWS = "25%, 25%, 50%">              <FRAME SRC="frame4.html">              <FRAME SRC="frame5.html">              <FRAME SRC="frame6.html">          </FRAMESET>      </FRAMESET>  </HTML>