Quick Search for:  in language:    
After,helping,script,extended,events,multifra
   Code/Articles » |  Newest/Best » |  Community » |  Jobs » |  Other » |  Goto » | 
CategoriesSearch Newest CodeCoding ContestCode of the DayAsk A ProJobsUpload
Java/ Javascript Stats

 Code: 220,465. lines
 Jobs: 92. postings

 How to support the site

 
Sponsored by:

 
You are in:
 
Login





Latest Code Ticker for Java/ Javascript
Click here to see a screenshot of this code!vok - The vocabulary trainer
By Thorsten Stärk on 1/7

(Screen Shot)

Java, Calculator
By Rockwell on 1/4


Eatable Interface
By Rockwell on 1/4


Superclass Person
By Rockwell on 1/4


Draws Cube Function
By Rockwell on 1/4


Rectangle Class
By Rockwell on 1/4


Find Number of Upper and Lower Case Letters in a Command Line Argument String
By Rockwell on 1/4


anagrams
By Rockwell on 1/4


Text Reader with Tokenizer
By Rockwell on 1/4


Click here to put this ticker on your site!


Add this ticker to your desktop!


Daily Code Email
To join the 'Code of the Day' Mailing List click here!

Affiliate Sites



 
 
   

Basic Cross-Frame Javascript Tutorial

Print
Email
 

Submitted on: 3/4/2001 3:26:39 PM
By: Rabid Nerd Productions  
Level: Intermediate
User Rating: By 6 Users
Compatibility:JavaScript

Users have accessed this article 19129 times.
 

(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 1 submission(s) by this author

 

 
Report Bad Submission
Use this form to notify us if this entry should be deleted (i.e contains no code, is a virus, etc.).
Reason:
 
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 AM:Herb 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...
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
4/4/2001 9:37:15 PM:Herb 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!
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
Add Your Feedback!
Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this article has been kind enough to share it with you.  If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular article, please click here.
 
Name:
Comment:

 

Categories | Articles and Tutorials | Advanced Search | Recommended Reading | Upload | Newest Code | Code of the Month | Code of the Day | All Time Hall of Fame | Coding Contest | Search for a job | Post a Job | Ask a Pro Discussion Forum | Live Chat | Feedback | Customize | Java/ Javascript Home | Site Home | Other Sites | About the Site | Feedback | Link to the Site | Awards | Advertising | Privacy

Copyright© 1997 by Exhedra Solutions, Inc. All Rights Reserved.  By using this site you agree to its Terms and Conditions.  Planet Source Code (tm) and the phrase "Dream It. Code It" (tm) are trademarks of Exhedra Solutions, Inc.