Html - frame tutorial

Web Hosting Offers

See the new scripts recently added to Dynamic Drive. Click here.

Original, practical CSS codes and examples such as CSS menus for your site.

Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

Home >> Tutorials >> Advanced javascript tutorials

Creating html Frames:

Creating frame linking to another frame Breaking out of frames

page opens in same frame page opens in new window loading multiple frames

Forms in frames back and forward in multiple frames Popup window and frame

iFrame

What is a frame?
Frames allow you to split the browser window into multiple windows that can display different pages. This will make the navigation much easier for the visitor. One of the major drawbacks is frames are not supported by all browsers (only Netscape 2.0 and above or IE 3.0 and above).

Creating a frame
Frames are very easy to set up. The document does not contain a <body>. Instead it contains one or more
<frameset> Tags which specify how a web page divides up.

<FrameSet> Tag:

<Frameset> containers specify how and where the page will divide up. Frame set contains rows or columns or rows and columns. We can specify the size of rows and columns in different ways.

The size of the frame can be specified in different ways:

The size of the frame as a percentage of the browser window.

<frameset rows="70%,30%">

Size of the frame in pixels.

<frameset rows="100,650">

Size of the frame in proportional value.

<frameset rows="40,*,3*">

Attributes of <frameset> tag
<frameset rows= "*,*" cols= "*,*" border=4 frameborder=yes bordercolor=red>

border………sets the thickness of the borders in that frameset in pixels the default is 3
frameborder ………can be set to yes or no, if no is selected then the borders do not have a 3D effect and are just plain lines
bordercolor …sets the color of the frameset borders in RGB value

<frame> Tag:

The frame tag defines the frames within the frameset. If there are two frames specified in the <frameset> tag then there must be two <frame> tags before the </frameset> tag.

Attributes of <frame> tag:

<frame src= "main.html" marginheight=6 marginwidth=4 bordercolor=black scrolling=auto noresize>

scr………......... This is where you enter the URL of the HTML document that will fill that frame. Absolute or relative reference can be used.
marginheight…sets the internal top and bottom margins in pixels
marginwidth…sets the internal left and right margins in pixels
bordercolor… sets the color of the frames borders in rgb value or in one of the set colors
scrolling………can be set to yes, no, or auto. This attribute will determine if the frame should have scrollbars with that frame or not. If set to yes, a scroll bars will be attached to the frame if contents of the frame does not fit within the frame.
noresize……if this is set then the frame can not be resized by user

Frame Example1:

<html>
<frameset cols="20%,80%">
<frame src="frame1.htm" name="frame1">
<frame src="frame2.htm" name="frame2">
</frameset>
</html>

Frame Example2: Nested Frames. Here you can see 2 framesets.

<html>
<frameset cols="20%,80%">
    <frame src="frame1.htm" name="frame1">
    <frameset rows="80%,20%">
        <frame src="frame2.htm" name="frame2">
        <frame src="frame3.htm" name="frame3">
    </frameset>
</frameset>
</html>

Linking to another frame

Some times we may have a link in one frame but we want the link to open in another frame. Here's how you can achieve this:

<a href= "htmlfile.htm" target= "destination_framename">

where htmlfile.htm is your html link file
and
destination_framename is the destination frame name or the target frame.

For example:

<html>
<frameset cols="20%,80%">
<frame src="menu.htm" name="menu">
<frame src="frame2.htm" name="main">
</frameset>
</html>

menu.htm has the following html code.

<html>
<body>
<a href="table.htm" target="main">Table</a>
<a href="form.htm" target="main">form</a>
</body>
</html>

Using Javascript:
You can achieve the same using javascript also. See the example below:

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<a href="javascript:LoadURL('table.htm')">Table</a><BR>
<a href="javascript:LoadURL('form.htm')">Form</a>
</body>
</html>

Breaking out from frames:
If you specify target="_top", the link will be opened in a full browser window.

Eg:

<a href="table.htm" target="_top">Table</a><br>
<a href="form.htm" target="_top">form</a>

Page opens in same frame :

If we put target="_self", the target page opens in the same frame set as the anchor or link

Eg:
<a href="table.htm" target="_self">Table</a>

Eg:

Page opens in a new window:

If we put target="_blank" the page opens in a new window.

Top

Targeting multiple frames or Loading multiple frames:

If you have more than 2 frames in a web page, you may want that when user clicks on a link in one frame, other frames gets loaded with different html files.

Although you can achieve this with the target property, using a JavaScript function is better. Suppose you have three frames frame1,frame2 and frame3. The user clicks on a link in frame1. Then you may want to load two different pages in the other frames, frame1 and frame2. You can use this function for example:
The following function takes 2 urls as parameters and changes the target properties of frames frame1 and frame2.

function TargetFrames(url1, url2) {
parent.frame1.location.href= url1;
parent.frame2.location.href= url2;
}

Source Code of main html file. This file has 3 frames frame1, frame2 and frame3. When user clicks a link in frame1,
contents of frame2 and frame3 gets changed.

<html>
<frameset cols="20%,80%">
    <frame src="link.htm" name="link">
    <frameset rows="80%,20%">
        <frame src="frame2.htm" name="frame2">
        <frame src="frame3.htm" name="frame3">
    </frameset>
</frameset>
</html>

Source Code of link.htm:

<html>
<head>
<script language="JavaScript">

<!-- hide

function TargetFrames(url1,url2) {
parent.frame2.location.href= url1;
parent.frame3.location.href= url2;
}

// -->

</script>
</head>
<body>

<a href="javascript:TargetFrames('first1.htm','sub.htm')">first link</a><Br>
</body>
</html>

Forms in frames

The <form> tag is used to place user fill-out forms within the body of a document.Suppose we have frames and we want to have the CGI program's response document displayed in a different frame. To display the results of a form submission in another frame, simply define the target within the <form> tag.

<form action = "cgi program" target="frame name">

Using back and forward statements in multiple frames

Here we are going to discuss how to go back and forth in multiple frames, via commands in a designated frame. Suppose we have 2 frames named frame1 and frame2.The following 3 statements reload the frame and go back and forth through its pages.

<a href="javascript:history.reload()">Reload (this frame)
<a href="javascript:history.back()">Back (this frame)
<a href="javascript:history.forward()">Forward (this frame)

The next three statements operate similarly on Frame 2, from Frame 1.
<a href="javascript:parent.frames[2].history.reload()">Reload (bottomrow frame)
<a href="javascript:parent.frames[2].history.back()">Back (bottomrow frame)
<a href="javascript:parent.frames[2].history.forward()">Forward (bottomrow frame)

Page contents: itechies.net - Learn how to create frame,how links work in frames,how to break out the frame,create multiple frames and more..

javascript book