README.md

December 4, 2022 · View on GitHub

Basic Cross-Frame Javascript Tutorial

Description

After helping to script extended events for a multi-framed (12 frames!) window, I am puting this together before I forget this myself!

More Info


Submitted On
By	Rabid Nerd Productions
Level	Intermediate
User Rating	4.3 (26 globes from 6 users)
Compatibility
Category	Internet/ Browsers/ HTML
World	Java
Archive File

Source Code

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:

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:

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-

[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";
}

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.