Loading Multiple Documents

Loading Multiple Documents
Prev	Chapter 18. Advanced HTML	Next

Loading two frames from one link

This section will look at how to load two documents with one click of a button. Take a look at Frames Example No 5, which will once again load in a new browser. In this example, the contents of both frames change with the click of one button.

This occurs when the user interacts with the user interface. In order to explain how to do this, some terminology has to be introduced and defined in the table below:

Term	Definition	Example
Object	An object is an entity in the real world, or, as in our case, an entity on a Web page. It has both state and behaviour.	link, button, image, frame, from, window, text
Event	An event causes the behaviour of an object to change, usually generated by the user interacting with the graphical interface.	mouse click, mouse move
Event handler	When an event occurs an associated function is invoked to handle the objects behaviour. The event handler usually has a name closely associated with the event.	onClick, onload, onUnload, onSubmit etc...

There are many event handlers. In this case when the event "mouse click" occurs on the specific "link" object it should be managed by the "onClick" event handler to display two HTML documents simultaneously in their respective frames.

Loading more than two frames from one link

A more complex example involves changing the contents of more than one frame. In this example, clicking a link (metals, fruits or animals) in frame 1 changes the contents of frames 2, 3 and 4, and clicking the contents link in the index frame re-sets the contents of all the frames. (Note: you will build this example in Activity 10 below.)

Activity 10: Loading multiple documents with one click

Load your HTML editor, e.g. MS Notepad, and create the Web page that sets up the five frames in a nested frameset, and then save the file as act3.html. The code is shown below.

    <html>
    <head>
    <title>Activity 10</title>
    </head>
    <frameset cols="150,*">
    <frame src="main.html" name="index" >
    <frameset rows="20%,*">
    <frame src="frame1.html" name="frame1">
    <frameset cols="*,*,*">
    <frame src="frame2.html" name="frame2">
    <frame src="frame3.html" name="frame3">
    <frame src="frame4.html" name="frame4">
    </frameset>
    </frameset>
    </frameset>
    </html>

Create the five files to appear in the five frames, ie.main.html, frame1.html, frame2.html, frame3.html and frame4.html:

main.html is the page that appears in the index frame.

    <html>
    <head>
    </head>
    <body bgcolor="darkkhaki">
    <h2>index frame</h2>
     The colour of this frame is
    <br>
    <center><i>dark khaki</i></center>
    <p>
    <a href="act3.html">contents</a>
    </body>
    </html>

frame1.html holds the links that will load the metals, fruits and animals pages into frames 1,2, 3 and 4. Note the JavaScript required to do this.

        <html>
        <head>
        <script language="javascript">
        function LoadInChildFrames(pageForFrame2, pageForFrame3,pageForFrame4)
        {parent.frame2.location.href=pageForFrame2
        parent.frame3.location.href=pageForFrame3
        parent.frame4.location.href=pageForFrame4}
        </script>
        </head>
        <body bgcolor="gold">
        <h2>frame 1</h2>
        <a href="metals.html" onclick="LoadInChildFrames('gold.html', 'silver.html', 'bronze.html')" >metals</a>
        <a href="fruits.html" onclick="LoadInChildFrames('orange.html', 'lemon.html', 'lime.html')">fruits</a>
        <a href="animals.html" onclick="LoadInChildFrames('lion.html', 'elephant.html', 'camel.html')">animals</a>
        </body>
        </html>

frame2.html, frame3.html and frame4.html are the initial pages in the lower frames.

frame2.html

    <html>
    <head>
    </head>
    <body bgcolor="mediumspringgreen">
    <h2>frame 2</h2>
    The colour of this frame is <br>
    <center><i> medium spring green</i></center>
    </body>
    </html>

frame3.html

    <html>
    <head>
    </head>
    <body bgcolor="cornflowerblue">
    <h2>frame 3</h2>
    The colour of this frame is <br>
    <center><i> corn flower blue</i></center>
    </body>
    </html>

frame4.html

    <html>
    <head>
    </head>
    <body bgcolor="blanchedalmond">
    <h2>frame 4</h2>
    The colour of this frame is <br>
    <center><i> blanched almond</i></center>
    </body>
    </html>

Now create the files for the respective links (metals, fruits and animals). Note, that only the.html code within the <body> is shown here.

metals.html

    <body bgcolor="slategray" text="yellow">
    <h2>frame 1</h2>
    welcome to the metals page, where you can find information on many of the earth's minerals
    </body>

gold.html

    <body bgcolor="gold">
    <h2>frame 2</h2>
    welcome to the gold page
    </body>

silver.html

    <body bgcolor="silver">
    <h2>frame 3</h2>
    welcome to the silver frame
    </body>

bronze.html

    <body bgcolor="tan">
    <h2>frame 4</h2>
    welcome to the bronze frame
    </body>

fruits.html

    <body bgcolor="slategray" text="yellow">
    <h2>frame 1</h2>
    welcome to the fruits page, where you can find information on many of the earth's fruits
    </body>

orange.html

    <body bgcolor="orange">
    <h2>frame 2</h2>
    welcome to the orange page
    </body>

lemon.html

    <body bgcolor="yellow">
    <h2>frame 3</h2>
    welcome to the lemon page
    </body>

lime.html

    <body bgcolor="lime">
    <h2>frame 4</h2>
    welcome to the lime page
    </body>

animals.html

    <body bgcolor="slategray" text="yellow">
    <h2>frame 1</h2>
    welcome to the animals page, where you can find information on many of the earth's animals
    </body>

lion.html

    <body bgcolor="goldenrod">
    <h2>frame 2</h2>
    welcome to the lion page
    </body>

elephant.html

    <body bgcolor="ivory">
    <h2>frame 3</h2>
    welcome to the elephant page
    </body>

camel.html

    <body bgcolor="palegoldenrod">
    <h2>frame 3</h2>
    welcome to the camel page
    </body>

Load act3.html and test the metals, links and fruits links in frame 1. You may notice that if you click on the contents link in the index frame, the entire page loads itself inside the frame. This problem can be resolved by adding JavaScript to ensure that the contents page (main.html) loads in the top frame. The script checks if the window containing the link is the top window. If it is not, then the top location is changed. Add the following JavaScript in the <head> section of act3.html
```
    <script language="javascript">
    if(top!=self)
       top.location.href = location.href
    </script> 
	    
```
Finally, test the file again in your browser.

Prev	Up	Next
Frameset hierarchies	Home	Answers