"Don't use frames." is an oft repeated advice in web developing. The disadvantages of using frames are many...
- Pages inside a frameset are hard to bookmark.
- Other sites won't be able to link to a page in a framed site.
- Search bots find it hard to go through a framed site
- Users can't type in the url of a deep page.
- And more...
But one could use frames in web designing if the designer gives a no-frame alternative for the site. www.quirksmode.org is a good example of how to do this. That said, let us continue with our tutorial.
HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled though or replaced by navigating in the second frame.
The code for creating a simple three pages frameset is given below.
<HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="frame1.html"> <FRAME src="frame2.html"> </FRAMESET> <FRAME src="frame3.html"> <NOFRAMES> <P>This frameset document contains: <UL> <LI><A href="frame1.php">Some neat contents</A> <LI><A href="frame2.php">Some more neat contents</A> <LI><A href="frame3.php">Some other neat contents</A> </UL> </NOFRAMES> </FRAMESET> </HTML>
that might create a frame layout something like this:
+---------+-----------------------------+ | | | | | | | frame1 | | | | | | | | |---------| | | | frame3 | | | | | | | | | | | frame2 | | | | | | | | | | | | | | +---------+-----------------------------+
I cannot put frames in this page without totally messing up the layout. So I put the frames in another page. Click here to open a new window with the frames page.
The Frame Tree of the above sample will be something like...
top | +---------+---------+ | | | frame1 frame2 frame3
We have to use this tree structure while accessing individual frames. So if I want to access frame2, I will use the code
For example we need to change the picture of a image that has the name 'img' in frame1
top.frame1.document.img.src = "images/roll2.gif"
Or we want to know the location of the image in frame1
alert("The Image's src is " + top.frame1.document.img.src)
One can also access the functions of a frame by
The page inside a frame can be changed using this code
top.frame2.location.href = "page.html"
This will load the file called 'page.html' into the frame by the name of 'frame2'.
In the case of Iframes, we have to follow another rule. First, lets make a iframe.
<iframe src="frames/iframe.php" name="frame_name" width="400" height="250"></iframe>
We don't have to use the '
top.frame_name.' code in the case of iframes. A simple
frames['frame_name'] will do just fine.
For example, let us change an image...
frames['frame_name'].document.images['img'].src = "../images/roll2.gif"
Other than this change everything else will use the same code as frames.
frames['frame_name'].location.href = "frames/frame2.php"
Try it out...blog comments powered by Disqus