Frames In DHTML

DHTML Tutorial / By
Frames proved to be a valuable extension to the HTML language, allowing multiple documents to be displayed in a single browser. With DHTML, frames become even more powerful, with the ability to read and write across frames.
 
This is achieved by the usual referencing of elements, but we need to ensure that we ‘travel’ safely from one frame to another.
 
If we have a frameset document:
 
  
<HTML>

<HEAD>

<TITLE>Frames</TITLE>

</HEAD>

<FRAMESET COLS="30%,*">

<FRAME NAME="menu" SRC="MENU.php">

<FRAMESET ROWS="50%,*">

<FRAME NAME="logo" SRC="LOGO.php">

<FRAME NAME="main" SRC="MAIN.php">

</FRAMESET>

</FRAMESET>

</HTML>
 
Then we have three frames, menu, logo and main. Each .htm file is very similar in structure, but watch for the subtle differences.
 
menu.php
  
<HTML>

<HEAD>

<TITLE>Menu</TITLE>

</HEAD>

<BODY>

<INPUT TYPE="text" NAME="menutext">

<BUTTON onclick="top.logo.logotext.value=menutext.value;">
To Logo</BUTTON>

<BUTTON onclick="top.main.maintext.value=menutext.value;">
To Main</BUTTON>

</BODY>

</HTML>
 
logo.php
 
<HTML>
<HEAD>
<TITLE>Logo</TITLE>
</HEAD>
<BODY>
<INPUT TYPE=”text” NAME=”logotext”>
<BUTTON onclick=”top.menu.menutext.value=logotext.value;”>
To Menu</BUTTON>
<BUTTON onclick=”parent.main.maintext.value=logotext.value;”>
To Main</BUTTON>
</BODY>
</HTML>
 
main.php
  
<HTML>

<HEAD>

<TITLE>Main</TITLE>

</HEAD>

<BODY>

<INPUT TYPE="text" NAME="maintext">

<BUTTON onclick="top.menu.menutext.value=maintext.value;">
To Menu</BUTTON>

<BUTTON onclick="parent.logo.logotext.value=maintext.value;">
To Logo</BUTTON>

</BODY>

</HTML>
 
STATUS.php
  
<HTML>

<HEAD>

<TITLE>Text Scroller</TITLE>

<SCRIPT>

sp=650;

function scroll() {

if (sp<-700) sp=650;

sp--;

text.style.left=sp;

setTimeout('scroll()',10);

}

</SCRIPT>

</HEAD>

<BODY onload="scroll();" SCROLL="NO" BGCOLOR=#6699CC>
<DIV STYLE=”position:absolute;overflow:hidden;top:0;left:0;
width:100%;height:100;background-color:#6699CC”>
<SPAN ID=”text” STYLE=”position:relative;top:5;
left:0;width:705;height:20;background-color:#6699DC”>
Here is the text that we see scrolling on the browser screen.
This DHTML Example is brought to you by eBIZ.com.		 
</SPAN>

</DIV>

</BODY>

</HTML>
 
Each frame can talk to any other frame. When we do this kind of manipulation, we must take care to ensure that we are using the correct navigation path. top refers to the top-most window, i.e. the window object that all the sub-windows are descended from, and then we can travel down the tree until we get to the frame we wish to be at.
 
parent refers to the window directly above the current window, which is useful for nested frameset manoeuvres, rather than having to travel all the way to the top of the tree and then back down again.
Scroll to Top