Important alert: (current site time 7/15/2013 1:51:28 PM EDT)
 

article

Basic Cross-Frame Javascript Tutorial

Email
Submitted on: 3/4/2001 3:26:39 PM
By: Rabid Nerd Productions  
Level: Intermediate
User Rating: By 6 Users
Compatibility: JavaScript
Views: 38288
author picture
(About the author)
 
     After helping to script extended events for a multi-framed (12 frames!) window, I am puting this together before I forget this myself!

 
 
Terms of Agreement:   
By using this article, you agree to the following terms...   
  1. You may use this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
  2. You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
  3. You may link to this article from another website, but ONLY if it is not wrapped in a frame. 
  4. You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.
				

Cross-frame Javascript Tutorial
by Herbert L. Riede, Programmer, WinDough.com, Inc.

After creating extensive code for a window with a dozen frames, I thought that submitting this article, even if only for my future reference, would come in handy to someone.

Myth #1: Frames are complicated

While frames are not always ideal for many designs, they do sometimes come in handy with specialized applications.

Let's take a look at a fictional frameset:

<frameset cols="100,*" border="0" framespacing="0" frameborder="NO" onbeforeunload="areyousure();">
    <frameset rows="120,*,300,*,10"  border="0" framespacing="0" frameborder="NO">
        <frame name="logo" src="My100x120Logo.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
        <frame name="spacer1" src="Spacer.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize> 
        <frame name="menu" src="menu.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
        <frame name="spacer2" src="Spacer.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
        <frame name="notice" src="Notice.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
    </frameset>
    <frame name="mainwindow" src="content.html" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0">
</frameset>

The first tag is the FRAMESET tag. It specifies two columns, one is 100 pixels wide, and the other takes up the rest of the width. There is to be no space between the two frames, no border, and before the frameset is unloaded, you wish to execute the JavaScript function areyousure().

onbeforeunload() is specific to Internet Explorer.

The second tag is a FRAMESET tag as well.. It will split up the 100 pixel wide column in the previous FRAMESET. It defines 5 rows, with the first one 120 pixels high, the third one 300 pixels high, and the fifth one 10 pixels high.
The second and fourth row will evenly split any remaining vertical pixels left, if any.

The next five tags assign the attributes to the five rows in the first column.

The next tag is necessary to close the inner frameset for the first column. (</FRAMESET>)

The next tag is a FRAME tag that assigns ALL of the second column to one page, and unlike all of the other frames, it enables scrolling, if necessary.

The FRAMESET map looks like this:

   LOGO         |
   SPACER1   |
   MENU        |      MAINWINDOW
   SPACER2   |
   NOTICE     |

Most tuorials will show you simple stuff like navigating the "mainwindow" frame from, say, the "menu" frame.

<a href="anotherpage.html" target="mainwindow">   -OR-

top.mainwindow.document.location.href= "anotherpage.html";

But what if you want to set a variable in another frame? Or run a function in another frame? Just as simple:

The first one runs menuClicked() in the "mainwindow" frame, the second sets "mainwindow" frame's myvariable to 1.

<a href="javascript:doNothing();" onClick="top.mainwindow.menuClicked(1); return false;"> -OR-

<a href="javascript:doNothing();" onClick="top.mainwindow.myvariable = 1; return false;">

[NOTE: doNothing() is usually a Javascript programmer's junk function, which contains no commands but still exists in each page's javascript]

Now what if you have one of your pages, say content.html, load a frameset of it's own? And you want to check to see is it has been loaded before you try to address the frames? OK, let's assume the content.html will split into two frames, named "topcontent" and "bottomcontent".. Now say you want the "logo" frame to have a link that loads something into "bottomcontent" if it exists, or into the entire "mainwindow" if it doesn't:

function LoadCopyright() {
if (top.mainwindow.bottomcontent) {
  top.mainwindow.bottomcontent.document.location.href="Copyright.html";
} else {
  top.mainwindow.document.location.href = "Copyright.html";
}

<A href="javascript:doNothing();" onClick="LoadCopyright(); return false;">

It took more typing to explain it than it did to DO it... Of course you need to surround javascript functions in a <SCRIPT> tag, and each <A href...> needs an </A> after the text or image you use for your link...

Now to a neat "Stupid FrameSet Trick" only available in IE using the FRAMESET or BODY tag's onbeforeunload="areyousure();"; property:

function areyousure() {
event.returnValue = "Are you sure you want to miss out on [My Offer]?";
}

This has great use in a frameset, because the viewer will only be asked if they:
A. Refresh the entire window
B. Visit a site that breaks out of the frameset
C. Clicks the Back button to exit your site
D. Clicks the 'X' Close button

Another neat side-effect is that if they click "Cancel", (to stay at your site) NOTHING happens! If you use "onunload", the window closes and you need to re-open the window!

You can see all of this functionality in it's full glory where I developed it at:
http://www.windough.com

Please note that what I present here is simplified and 'common knowledge' of advanced Javascript programmers. You may develop based on this tutorial, but you may not use code from Windough.com.

If you have any comment or questions, please don't hesitate to post them. I enjoy helping people.

If this was of any use to you, please Vote.. I don't expect to win, but positive votes help the ego now and then :)

Also, if you have any other tutorial suggestions, please comment here as well.

Herbert Riede
Programmer, WinDough.com, Inc.


Other 2 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Intermediate category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments
3/6/2001 12:33:36 AMHerb Riede (Author)

I noticed I started with one format ("Myth #1") but never followed through... Oops! When I get my head back on straight I'll update this to be a little clearer...
(If this comment was disrespectful, please report it.)

 
4/4/2001 9:37:15 PMHerb Riede

I am shocked by the win! Thank you so much for the votes, as I said, I didn't expect to win, but I'm grateful!

If you have any questions, just let me know!
(If this comment was disrespectful, please report it.)

 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)
 

To post feedback, first please login.