E-Teacher 电子教师 >> Homepage Constructions 网页建设

Homepage Constructions 网页建设

[Online Resource Centre 教学材料] [E-Teacher 电子教师] [Homepage Constructions 网页建设 ]

Javascript

OnLoad & OnUnLoad

Doing Something When a Page Loads or Unloads

When this page loads, a sound is played. The sound you hear depends on the time:

0-15 minutes after the hour: "Scotty, Beam me Up"
16-30 minutes after the hour: "You Will Be Absorbed"
31-45 minutes after the hour: "Moo"
46-60 minutes after the hour: "I'll Be Back"

Upon exiting that page, you'll see a farewell message. (At least that was the intent when we designed the new page. Things may, or may not, behave that way depending on the browser you are using. We'll have a bit more to say about using Javascript with different browsers a little later.)

The Javascript code responsible for the sound playing when the new page opens, and for the farewell message appearing when the page closes, is (of course) located in the file for the new page. The text of that code is:

  <script language="JavaScript"> 
 
    <!--Hide Script from non-supportive browser 
    function play_music(){ 
    var my_time= new Date(); 
    if ((my_time.getMinutes()>=0) && 
        (my_time.getMinutes()<=15)) 
    window.location="scotty_beam_me_up.au"; 
    else if ((my_time.getMinutes()>=16) && 
             (my_time.getMinutes()<=30)) 
    window.location="absorbed.au"; 
    else if ((my_time.getMinutes()>=31) && 
             (my_time.getMinutes()<=45)) 
    window.location="moo.au"; 
    else if ((my_time.getMinutes()>=46) && 
             (my_time.getMinutes()<=60)) 
    window.location="beback.au"; 
    } 

    function bye_message(){
    window.alert("Glad you could visit. 
                  Please come back soon.");
    }
 
    // Done Hiding--> 
 
  </script> 
 
  </HEAD> 
 
  <BODY onLoad="play_music()" onUnload="bye_message()" 
  background="../gifs/chalk.jpg" BGCOLOR="#eeeeee" 
  TEXT="#000000" LINK="#0000FF" VLINK="#e500FF" 
  ALINK="#FF0000">

Some things to notice about this code section:

onLoad="play_music()" in the <BODY> tag causes the (user-defined) play_music function to be executed when the page is loaded.
onUnload="bye_message()" in the <BODY> tag causes the (user-defined) bye_message function to be executed when the page is unloaded.
These two functions are defined inside the <script> tag that is included in the <HEAD> tag (the beginning of the <HEAD> tag is not shown in the above listing). Putting the function definitions here assures that definitions are loaded before they are used on the page.
The present number of minutes past the hour is gotten from my_time = new Date and my_time.getMinutes. Here getMinutes is a method of the my_time date object.
window.location is assigned different values, depending on the current number of minutes past the hour.
Setting window.location to the name of an audio file causes the sound in that file to be played.
window.alert opens an "alert" box to display the message that's passed as an argument.

Windows and Sounds

Sounds in New Browser Windows: Note that having a sound play when a new page opens does not depend on opening the page in a new browser window. We've opened the new page in a new window here as a matter of convenience, basically as a way to avoid an annoyance that arises with some browsers. Some browsers are now configured to play sounds with a particular plugin that insists on displaying a control panel that takes over the entire browser window.

We'd initially written this example so that the sounds played when this page (the one you're reading now) loaded. But then we discovered that if the page were viewed with a browser that uses a plugin like we just described for playing sounds, there was never any way to see the text on this page. Because a sound was played when the page loaded, the plugin immediately replaced this page with one showing only the plugin control panel. If you clicked the browser's Back button to try to return to this page, the sound again started to play when the page reloaded and the plugin again returned you to the page with its control panel. (This is a potential complication you should keep in mind if you ever want to have a sound play when one of your own pages loads.)

Since we wanted you to be able to read the text on this page without having to reconfigure how your browser plays sounds, we moved the example with onLoad sounds to another page and arranged to have it open in another window. That way, the text on this page should still be available for you to read regardless of what your sound plugin does.

Playing a Sound When a Page Unloads: You can also use onUnload and window.location to play a sound when a window unloads a page. But this can sometimes lead to unwanted results.

Sometimes, with some browsers, a page with such an onUnload command may play a sound when you exit the page, but you may then fail to correctly transfer to another page (whether the transfer was supposed to have been made by clicking a link or by your typing a new URL into the window's Address/Location box). In this case, you'll probably be left with an empty window after the sound finishes. Clicking the window's reload button should then transfer you to the proper new location.

If a page has an onUnload command to play a sound and you click the window's close button before the sound plays, the window may simply close without the sound being played. But with some browsers, clicking the window's close button in such cases may completely crash the browser!

Opening New Browser Windows: Finally, if you don't already know how to use a link to open a page in a new browser window, fear not. We'll be discussing that topic shortly.

[Online Resource Centre 教学材料] [E-Teacher 电子教师] [Homepage Constructions 网页建设 ]