 |
|
Main navigation links of HTML and JavaScript tips and tricks section
|
Changing contents of two frames - JavaScript tricksHere we look at changing contents of two frames simultaneously. This is a cool JavaScript trick and assumes you understand the language and HTML frames. If you are not familiar with these, you can find the appropriate tutorials on this site. Firstly, we require an HTML file that contains a frameset. <HTML> <HEAD> <TITLE>Changing two frames</TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="menu1.html" NAME="MENUFRAME"> <FRAME SRC="main1.html" NAME="MAINFRAME"> </FRAMESET> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> The code above creates an HTML document containing two frames. You can give any name to this file; I've used twoframes.html. Click on the link to view it. (Loads in another browser window) Important points to remember when changing contents of two frames using JavaScript
Our aim is to have a link in menu1.html which when clicked, will change the contents of both frames - MENUFRAME and MAINFRAME. Our menu1.html file is the important one. Here is the HTML code:
<HTML>
<HEAD>
<TITLE>LEFT FRAME</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--
function change_frames(file1, file2)
{
parent.MENUFRAME.location=file1;
parent.MAINFRAME.location=file2;
}
//-->
</SCRIPT>
<BODY BGCOLOR="#FFFFFF">
<A HREF="javascript:change_frames('menu2.html', 'main2.html')">
Change</A>
</BODY>
</HTML>
When the link is clicked, it loads menu2.html, which has a light blue background in MENUFRAME and main2.html having a yellow background in MAINFRAME. Explanation of the JavaScript codeThe function change_frames() accepts two arguments. These are files names passed to the function via JavaScript code in HREF of <A> tag. (Note: The HREF attribute of the <A> tag does not have a file URL as value but JavaScript code). This code is a function call and passes two parameters to change_frames(). The "menu2.html" file contains the same JavaScript code. However, in this case, we pass different filenames to change_frames() function. Have a look at its code by right clicking in the browser window and selecting View Frame Source (in N.N.) or View Source (in I.E.). 
Page contents: Article describe how to change the contents of two HTML frames using JavaScript code to load a new web page in each of the two frames.
Page URL: http://www.webdevelopersnotes.com/tips/html/ changing_contents_of_two_frames_javascript_tricks.php3
|
|
Tip #1 - #10
