• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Loading a Frame

It's common to have one frame that serves as a navigation bar for your site, which loads the different pages into the main frame. The frameset in Script 4.9 allows you to load your choice of page ( Scripts 4.11, 4.12, and 4.13 ) into the main content frame, just by clicking on a link in the left frame ( Script 4.10, detailed below).

To load one frame from another:

								pageArray = new Array ("", "frame4a.html","frame4b.html", "frame4c.html")


Create a new array called pageArray, which contains the URLs available from the navigation bar. In the page shown in Figure 4.8, there are three possible pages that can be displayed in the content frame, so you need three URLs. The first position in the array is position 0, which you leave blank so that you can use positions 1, 2, and 3 of the array to match pages 1, 2, and 3.

Figure 4.8. Here's frame acting as a navigation bar with the content page appearing in a content frame.

								function setContent(thisPage) {
								parent.content.document.location.href = pageArray[thisPage]

Create a new function called setContent, which, when given a page number, loads the content frame with the requested page. It does this by finding the parent of the current document, then finding the content frame of the parent document, and then loading the new page into that frame by setting the location.href, the URL source, for that frame document.

								<A HREF = "javascript:setContent(1)"> Page 1</A>

Within the body of the page, create links to pages that you want loaded into the main window. When the link is clicked, the JavaScript function setContent is called and passed the page number (1, in this case) that you want to load. Repeat this line, with a new page number, for each page that you want to show in the content frame.

Script 4.11. Here's page 1,

Script 4.12. page 2,

Script 4.13. and page 3.

Script 4.14. Here's the frameset.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint