Using JavaScript to Manage Frames

[ LiB ]

So far, every HTML page that I have shown you has been based on the window object. In other words, all the Web pages you have worked with have the window object at the top of the page's object hierarchy. In addition, every HTML page so far has contained a head and a body section. You have embedded JavaScripts in both of these sections.

Modern browsers provide an alternative approach to organizing and presenting data within the browser. Using frames , HTML pages can divide a window into multiple smaller windows , each of which is its own entity with its own URL. In fact, as far as JavaScript is concerned , a frame is simply a variation of the window object. So even though there is a JavaScript frame object, this object is really just a convenient way of referring to a specialized window object. Because a frame is a window object, frame objects support the same methods and properties that window objects do. When you use frames, you will have one frame object for every frame defined on the page.

Frames are created using the HTML <FRAMESET> and <FRAME> tags. The <FRAMESET> tag replaces the body section in an HTML page. This tag defines how your frames will be laid out and how space is allocated to each frame.

A Typical Frames Example

In its simplest form, an example using frames involves three different HTML pages. The first page contains the <FRAMESET> and <FRAME> tags and defines the layout in which the other pages will be displayed. These pages provide the content that is loaded into the frames; each of these pages is composed of HTML and JavaScript statements.

The following example can be used to create a HTML page using frames. This HTML page contains two <FRAME> tags inside a single <FRAMESET> tag. The <FRAMESET> tag defines two frames using the COLS="*,*" attribute, which instructs the browser to assign all available space to the frames. The first frame is named left and loads the specified page. Because the frameset used the COLS attribute to define two column frames, the first frame is the left column. The second frame is named right and is assigned a different page to load.

 <HTML>   <HEAD>      <TITLE>Script 3.20 - Building your first frame </TITLE>   </HEAD>   <FRAMESET COLS="*,*">     <FRAME SRC="Script3.21b.html" NAME="left">     <FRAME SRC="Script3.21c.html" NAME="right">   </FRAMESET> </HTML>

Creating Frame Content Using JavaScript

You can use JavaScript to control frames and frame content. JavaScript provides you with the capability to control more than one frame at a time. This is something that cannot be accomplished with HTML.

Before you can take advantage of JavaScript's capability to control frames, you must first understand something about how the browsers build a frame hierarchy into your Web pages. Every frame belongs to a frameset that can be referred to as the frame's parent or top . Each frame in the frameset is listed in an array named frames[] , based on the order in which the page is loaded. The first frame in the array is frames[0] , the second is frames[1] , and so on.

For example, the following page defines a simple two-frame display:

 <HTML>   <HEAD>     <TITLE>Script 3.23 - Using JavaScript to add dynamic content to frames</TITLE>   </HEAD>   <FRAMESET COLS="*,*">      <FRAME SRC="Script 3.24.html" NAME="left">     <FRAME SRC="Script 3.25.html" NAME="right">   </FRAMESET> </HTML>

The top or parent frameset is at the top of the hierarchy, and each frame in the frameset is listed in the order in which it is defined. Now that you understand how the browser creates this frame hierarchy, you can use JavaScript to reference and control frames. For example, parent.frames[0] and top.frames[0] both refer to the first frame; parent.frames[1] and top.frames[1] reference the second frame.

As you may have noticed, an array is automatically created that contains an entry for each frame on the Web page, beginning with an index of 0 based on the order in which the frames are defined.

NOTE

If you add the NAME="" attribute to the <FRAME> tag, you can also refer to individual frames by their assigned names. In the preceding example, which names the frames left and right , you could reference the first frame in the hierarchy as either parent.left or top.left .

One of the benefits of using JavaScript with frames is that you can provide dynamic content on a frame. In other words, you can write directly to a frame instead of loading a Web page into it. The following example demonstrates this technique.

The previous example showed a Web page that defined two frames. The following example shows the HTML page that is loaded into the left frame.

 <HTML>   <HEAD>     <TITLE>Script 3.24 - Writing dynamic content</TITLE>    </HEAD>   <BODY>     <FORM>       <INPUT TYPE="button" NAME="button1" VALUE="Click Me"          OnClick="top.right.document.write('<H3>Hello world!</H3>')">     </FORM>   </BODY> </HTML>

This HTML page defines a form containing a button that, when clicked, executes the JavaScript statement top.right.document.write('Hello world!') and, as a result, displays the message Hello world! in the right frame. You might remember that the top or parent reference represents the top of the frame hierarchy. The top.right call refers to the frame named right in the same frameset as the left frame (its "sibling" frame, and the frame that contains the top.right statement). Had you left the top.right reference off the document.write() statement, the message would have been written in the left frame.

The following page shows you the HTML page that is loaded initially into the Web page's right frame.

 <HTML>   <HEAD>     <TITLE>Script 3.25 - The initial content displayed in the right frame</TITLE>   </HEAD>   <BODY>     <H3>This is the right frame.</H3>    </BODY> </HTML>

Figure 3.24 shows how things look after you load the first HTML page and click on the Click Me button.

Figure 3.24. An example of using JavaScript to post messages onto frames instead of unloading and loading new pages

graphic/03fig24.gif

Controlling Frames with JavaScript

You already know that you can load Web pages into target frames using the HTML link tag as shown here:

 <A HREF="link1.html" TARGET="right">Sample Link 1</A>

Alternatively, you can use JavaScript to load pages into your frames. Because of JavaScript's programming logic, you can exercise greater control over how and when the frames are unloaded and loaded. The following example shows how you can replace your HTML links with JavaScript to manage your frames. The example consists of four pages.

The first page contains the <FRAMESET> and <FRAME> tags and defines the overall structure of the Web site. In this case, two frames are defined and named left and right ; both are assigned 50 percent of the available display area in the browser.

 <HTML>   <HEAD>     <TITLE> Script 3.26- Controlling frames with JavaScript</TITLE>   </HEAD>   <FRAMESET COLS="*,*">     <FRAME SRC="Script 3.27.html" NAME="left">     <FRAME SRC="Script 3.28.html" NAME="right">   </FRAMESET> </HTML>

The left frame contains a form that defines a button named button1 that displays the text Click Me . When clicked, the button's onClick event handler is executed. Using the browser hierarchy, the JavaScript statement in the event handler first references the top (or parent ) of the hierarchy. Next , the statement specifies the frame in which the new page will be loaded. Instead of referencing the frame as parent.right , the frame is identified using its location in the frames[] array. Because the target frame is the second frame that was defined and the frames[] array starts with an index value of 0, parent.frames[1] is used to reference the second frame. Next, the location property is added. Finally, the HTML page that is to be loaded is specified.

 <HTML>   <HEAD>      <TITLE> Script 3.27- Adding the JavaScript control</TITLE>   </HEAD>   <BODY>     <FORM>       <INPUT TYPE="button" NAME="button1" VALUE="Click Me"         onClick="parent.frames[1].location='Script 3.29.html'">     </FORM>   </BODY> </HTML>

The page that is initially loaded into the right frame is very straightforward and is shown below.

 <HTML>   <HEAD>     <TITLE> Script 3.28 - Initial content loaded into the right frame </TITLE>   </HEAD>   <BODY>     <H3>This is the right frame.</H3>   </BODY> </HTML>

The page that will be loaded into the right frame when the button is clicked is equally straightforward, containing a single message formatted as an HTML heading as shown below.

 <HTML>   <HEAD>     <TITLE> Script 3.29 - The new page</TITLE>    </HEAD>   <BODY>     <H3>This is the new frame you just loaded!</H3>   </BODY> </HTML>

Figure 3.25 shows the result of loading this example and clicking on the Click Me button. In the next example, I will show you how to use JavaScript to do something that HTML alone cannot do: controlling more than one frame at a time.

Figure 3.25. An example of loading pages under the control of JavaScript

graphic/03fig25.gif

Controlling More than One Frame at a Time

The next example shows how easy it is to use JavaScript to control more than one frame at a time. In this example, I have modified the form in the left frame from the previous example. As you can see, the onClick event handler now specifies a second JavaScript statement. I was able to add the second statement to the event handler by placing a semicolon at the end of the first statement. Had I wanted to add yet another statement to the event handler, I probably would have elected to create a function, placed all the statements within the function brackets, and then called the function from within the onClick event handler.

 <HTML>   <HEAD>     <TITLE> Script 3.27a- Controlling more than one frame at a time with JavaScript</TITLE>   </HEAD>   <BODY>     <FORM>       <INPUT TYPE="button" NAME="button1" VALUE="Click Me"         onClick="parent.frames[0].location='Script3.30.html';           parent.frames[1].location='Script3.29.html'">     </FORM>   </BODY> </HTML>

The structure of the second statement is the same as that of the first statement except that it references a different frame (the parent.frame[1] frame or the right frame).

Displaying Other Web Sites Using Frames

Many people like to add links to other Web sites on their HTML pages. One of the disadvantages of providing your visitors with links to other Web sites is that they may follow them and never come back to your site. However, if you use frames, you can provide links to other Web pages without actually sending your visitors away. All that you have to do it load the other Web site into a frame located on your HTML page. In addition to keeping your visitors at your site and providing a very slick interface, you can give even a small Web site the appearance of being a huge megasite by doing nothing more than loading other URLs into your frames.

The following example creates a Web site using frames. The frame on the left provides a navigation menu; the frame on the top right displays your Web site's title or other useful information. The remaining frame is used to display the URLs of other Web sites.

The first page defines the layout of the frames. In this case, a <FRAMESET> tag divides the display into two columns , assigning 15 percent of the space to the first column and the remaining 85 percent to the second column. Next, a <FRAME> tag specifies the page that will serve as the navigation index. A second nested <FRAMESET> tag divides the space allocated to the second column into two rows and assigns 8 percent to the first row and the remaining 92 percent to the second row. Two frames are then defined. The first loads a local Web page into the small top frame, and the second loads the URL for a popular Internet search engine, www.yahoo.com, into the larger frame.

 <HTML>   <HEAD>     <TITLE> Script 3.31- Loading other URLs into your frames</TITLE>   </HEAD>   <FRAMESET COLS="15%,85%">     <FRAME SRC="Script 3.32.html" NAME="left" SCROLLING="auto">     <FRAMESET ROWS="8%,92%">       <FRAME SRC="Script 3.33.html" NAME="right1" SCROLLING="auto">       <FRAME SRC="http://www.yahoo.com" NAME="right2" SCROLLING="auto">      </FRAMESET>   </FRAMESET> </HTML>

The navigation page loaded into the left frame defines several links to other popular Internet search engines. In this case, since the links to these URLs are all loaded into the same frame, I chose to use HTML link tags with the target attribute:

 <HTML>   <HEAD>     <TITLE> Script 3.32- Using the left frame as a navigation page</TITLE>   </HEAD>   <BODY>     <P><B>Search Engines:</B></P>       <A HREF="http://www.excite.com" TARGET="right2">Excite</A><BR>       <A HREF="http://www.alta-vista.com" TARGET="right2">AltaVista</A><BR>       <A HREF="http://www.yahoo.com" TARGET="right2">Yahoo</A><BR>   </BODY> </HTML>

The page shown below is loaded into the top frame and is used to display the name of the Web site; this frame helps to give a polished look and feel to the Web site.

 <HTML>     <HEAD>     <TITLE> Script 3.33- Adding a title frame to your Web site</TITLE>   </HEAD>   <BODY>     <CENTER>     <H2>Welcome to my Internet Search Engine Web Site.</H2>     </CENTER>   </BODY> </HTML>

Figure 3.26 shows what the initial display looks like when you first load this example. As you can see, by using frames and three simple scripts, you can create a Web site that provides users with access to a collection of popular URLs.

Figure 3.26. Using JavaScript to control multiple frames simultaneously

graphic/03fig26.gif

NOTE

There are lots of ways to make money on the Internet. One way is to join associate programs with various Internet companies. In these programs, you get paid for every customer you lead to their Web site who then makes a purchase. For example, using a modified version of the previous example, you could easily create your own online bookstore with several pages that highlight books you think will attract customers; then you provide links to other online bookstores whose affiliate programs you have joined. Visitors to your site can purchase books or anything else that the other online company sells. In fact, tomorrow morning, I'll demonstrate how to build such a bookstore.

FramesNo Thank You

Although you might appreciate how easy it is to load other URLs into your frames, you may not want to have your own Web pages show up in other people's frames, especially if your pages are loaded into frames that are too small, making your site look bad. That's where this next example comes in handy. It shows you how to prevent other people from loading your Web pages into their frames, using just a couple lines of JavaScript.

 <HTML>   <HEAD>     <TITLE>Script 3.34 - Blocking frames from loading your Web page</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       if (top.frames.length!=0) {         top.location=self.document.location;       }     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>    <BODY>     <CENTER>       <H1>Welcome to my page!</H1><BR>       <H3>Thanks for visiting!!!</H3>     </CENTER>   </BODY> </HTML>

I placed the script inside the head section of the page so that it would execute as soon as possible. The first line in the script is an if statement that checks to see whether somebody is trying to load the page into a frame by checking the value of top.frames.length . If the condition is 0 or true , then the statement top.location=self.document.location tells the browser to set the page's location property to itself, thus preventing it from being loaded into a frame.

Anyone who tries to load this Web page into his frame will be surprised to see that your page not only is not loaded, but also that it has completely replaced his own Web page.

[ LiB ]