Previous Page
Next Page

Sharing Functions between Frames

One common frame layout uses a permanent navigation frame and a content frame that might display a variety of different pages. Once again, it makes sense to put the call to the external JavaScript file into the page that's always present (the frameset page) instead of duplicating it for every possible content page. In Figure 5.10, we use this capability to have many pages share an identical function that returns a random banner image. Script 5.12 loads the pages into the frameset.

Figure 5.10. The information in the right, or content, frame is created by code called from the frameset.

[View full size image]


Script 5.12. This script allows you to share functions between multiple frames.

[View full width]
var bannerArray = new Array("images/redBanner. gif", "images/greenBanner.gif", "images/
blueBanner.gif");
window.onload = initFrames;

function initFrames() {
     var leftWin = document.getElementById ("left").contentWindow.document;

     for (var i=0; i<leftWin.links.length; i++) {
        leftWin.links[i].target = "content";
        leftWin.links[i].onclick = resetBanner;
     }

     setBanner();
}

function setBanner() {
     var contentWin = document.getElementById ("content").contentWindow.document;
     var randomNum = Math.floor(Math.random() * bannerArray.length);

     contentWin.getElementById("adBanner").src = bannerArray[randomNum];
}

function resetBanner() {
      setTimeout("setBanner()",1000);
}

To use a function on another page:

1. 
[View full width]
var bannerArray = new Array ("images/redBanner.gif", "images/greenBanner.gif", "images
/blueBanner.gif");



Start by creating a new array that contains all the possible banner image names, and assign the array to the bannerArray variable.

2. 
window.onload = initFrames;



When the frameset loads, call initFrames().

3. 
var leftWin = document.getElementById("left"). contentWindow.document;



Now we start the code inside the initFrames() function. We begin by creating the leftWin variable and setting it the same way we've previously stored framed pages: given the frame name (left), get that element (document.getElementById("left")); given that element, get the contentWindow property (document.getElementById("left").contentWindow); and given the contentWindow property, get its document property.

4. 
for (var i=0; i<leftWin.links. length; i++) {
  leftWin.links[i].target = "content";
  leftWin.links[i].onclick = resetBanner;



Because this function is being called from the frameset's context, setting the left navigation bar's links is slightly different than in previous examples. This time, we reset both the target property and the onclick handler for each link. The target is set to "content" and the onclick handler is set to the resetBanner function.

5. 
setBanner();



As the last initialization step, the setBanner() function is called.

6. 
var contentWin = document.getElementById("content"). contentWindow.document;



The setBanner() function loads up the content window and calculates a random number. Then, the ad banner in the content window is set to a random ad from the array. We begin by creating the contentWin variable and setting it the same way we've previously stored framed pages: given the frame name (content), get that element (document.getElementById("content")); given that element, get the contentWindow property (document.getElementById ("content").contentWindow); and given the contentWindow property, get its document property.

7.
var randomNum = Math.floor (Math.random() * bannerArray. length);

This line uses the Math.random() function multiplied by the number of elements in the bannerArray array to calculate a random number between 0 and the number of elements in the array. Then it places the result into the randomNum variable.

8. 
contentWin.getElementById ("adBanner").src = bannerArray[randomNum];



Here, we set the src for adBanner to the current item in the array. That's the new image name, which will then be displayed on the page.

9. 
function resetBanner() {
  setTimeout("setBanner()",1000);
}



The resetBanner() function is a little tricky, although it only has a single line of code. What it's doing is waiting for the content frame to load with its new page (one second should be sufficient), after which it can then call setBanner() to reset the banner.

If we instead called setBanner() immediately, the new content page might not have loaded yet. In that case, we would have a problem, as we would then either get an error (because adBanner wasn't found), or we would reset the old adBannerthe one from the page that's being unloaded.

Tip

  • Note that resetBanner does not return falsethis means that the browser will both do what's here and load the page from the HRef. This script depends on that, which is why both the onclick handler and target were set.



Previous Page
Next Page