Java script advanced frame

Lecture 19
Using One Frame for Your
Main JavaScript Code
As explained in the previous lecture, HTML offers a concept called frames that allows you to
divide the available space in a given window into multiple frames into which you can load different
documents.
When you are working with frames, it is sometimes useful to place all your JavaScript functions in one
frame that will not change so they are easily accessible to all frames at all times.
For example, if all the functions fn1 (), fn2 () are placed inside frame1 and frame 2 want to call function
fn1 (), frame 2 will use the following statement
Parent.frame1.fn1 ()

Let us take an example:
Below is the code for frameset.html
<HTML>
<frameset cols="50%,50%">
<frame name="lp" src="frame1.html">
<frame name="rp" src="frame2.html">
</frameset>
</HTML>

Below is the code for frame1.html
<HTML>
<HEAD>
<TITLE> Frame 1</TITLE>
<script language="JavaScript">
function fn1()
{
window.alert("Function 1() called");
}

function fn2()
{
window.alert("Function 2() called");
}
</script>
</HEAD>
<BODY>
This is frame 1 <br>
<a href="#" onClick="fn1()"> Call First Function </a> <br>
<a href="#" onClick="fn2()"> Call Second Function</a>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Frame 2</TITLE>

</script>
</HEAD>
<BODY>

<a href="#" onClick="parent.lp.fn1()"> Call First Function </a> <br>
<a href="#" onClick="parent.lp.fn2()"> Call Second Function</a>
</BODY>
</HTML>

Using a Hidden Frame for
Your JavaScript Code
Sometimes you want to use a “hidden” frame to store a document containing nothing and
only your JavaScript code.

<frameset cols=”0,50%,50%”>
<frame …>
<frame …>
<frame …>
</frameset>

Let us take an example
Here is code.html
<HTML>
<HEAD>
<TITLE> Source code for all the frames</TITLE>
function fn1()
{
window.alert("function f1() called");
}

function fn2()
{
window.alert("function f2() called");
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

Here is the frameset.html
<HTML>
<frameset cols="0,50%,50%">
<frame name="codeFrame" src="code.html">
</frameset>
</HTML>

Below is frame1.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="#" onClick="parent.codeFrame.fn1()"> Call First Function </a> <br>
<a href="#" onClick="parent.codeFrame.fn2()"> Call Second Function</a>
</BODY>

</HTML>

Below is frame2.html
<HTML>
<HEAD>
<TITLE>Frame 2</TITLE>
</HEAD>
<BODY>
<a href="#" onClick="parent.codeFrame.fn1()"> Call First Function </a> <br>
<a href="#" onClick="parent.codeFrame.fn2()"> Call Second Function</a>
</BODY>
</HTML>

Working with Nested Frames
All the examples that you have seen till now only deal with single layer frames. We can have
nesting of frames that mean, a frame can be further sub divided into two frames. How to use JavaScript
code with nested frames?

Here is an example to understand calling functions in Nested Frames

Below is the code for frameset.html
<HTML>
<frameset cols="50%,50%">
</frameset>
</HTML>

<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="#" onClick="parent.rp.subFrame2.fn1()"> Call Function in SubFrame 2 of Frame 2</a>
</BODY>
</HTML>
<HTML>
<frameset rows="20%,80%">
<frame name="subFrame1" src="subFrame1.html">
<frame name="subFrame2" src="subFrame2.html">
</frameset>
</HTML>
Below is the code for subFrame1.html
<HTML>
<HEAD>
<TITLE> Sub Frame1</TITLE>
</HEAD>
<BODY>
This is sub Frame 1
</BODY>
</HTML>
Below is the code for subFrame2.html

<HTML>
<HEAD>
<TITLE> Sub Frame2 </TITLE>
function fn1()
{
window.alert("Function f1 called");
}
</script>
</HEAD>
<BODY>
This is subFrame 2
</BODY>
</HTML>

Dynamically Creating Frames
in JavaScript
Dynamically creating frame means, creating the <frameset> and <frame> at runtime using JavaScript. Till
now, we have been creating <frameset> using HTML. But now we will learn, How to create <frameset> at
run time.

Here is the code for that.

<HTML>
document.open();
document.write("<frameset cols='50%,50%'>");
document.write("<frame src='frame1.html' name='lp'>");
document.write("<frame src='frame2.html' name='rp'>");
document.write("</frameset>");
document.close();
</script>
</HTML>

Important thing that is worth mentioning here is that I have used single quotes (‘’) instead of (“”) in all the
tags.

Java script advanced frame

Recommended

More Related Content

Similar to Java script advanced frame (20)

More from H K (20)

Recently uploaded (20)

Java script advanced frame