frames cheat card
How To...
... access functions and variables across frames?
... target more than one frame at a time using DW?
... target more than one frame at a time using JavaScript?
... target more than one frame at a time using another frameset?
... replace the title of a frameset with the title of the document from another frame?
... call the default frameset if my page loads in the browser window without its parent?
... make sure that another website doesn't "frame" my pages?
... reload a particular frame?
... make my document "stick" into its frame?
... script pages outside the scope of my domain?
... use javascript instead of the HTML 'A' tag to load a page into a specific frame?
... use "Preview in Browser" with framesets (Dreamweaver)?
... create and manage framesets in Dreamweaver?
... get rid of an horizontal scrollbar that shows only in MSIE?
Accessing functions and variables across frames:
To be able to execute a function or call a method from another frame, we need first to traverse the frame tree until we're in the document hosting the function. Once we're there, we can execute the code as if we were in that same document.
If you've used the 2 frameset popups from figure A & B [in the previous section], you may already have a rough idea about how this is done.
A call to a function from an active document is as simple as: javascript:myFunction().
This could also be written as:
javascript:self.myFunction()or
javascript:window.myFunction()
Keeping this in mind, you'll find that to fetch a function in a particular frame is as easy as replacing the reference to the active window [self, window] with a valid reference to the frame/window holding the function. This could be:
parent.frames[0].myFunction()top.frames[0].frames[2].myFunction(), etc.
Accessing variables is much the same:
parent.frames[0].var = "Hello Word!";
This popup (large screen resolution required) uses the alert() method to demonstrate very basic cross-scripting.
Give it a try.
Targeting more than one frame at a time using DW:
The "Go To URL" behavior can set more than one link and target more than one frame at once.
These are 8 easy steps to follow:
- Select the element to which you want to apply the behavior,
- Click on the "+" sign in the upper left corner of the Behaviors window,
- Select "Go To URL",
- Use the "Browse..." button to select an URL,
- Use the "Open In:" Textarea box to select a target
frame, - Do not click OK yet!
- Repeat steps 4 and 5 as many times as needed,
- When you're done click OK.
Murray Summers' plug:
If you are applying this behavior to an image, make sure you use the parenthesized events, e.g., (onMouseOver), (onClick), etc.
Targeting more than one frame at a time using JavaScript:
Using a link:
<a href="page1.htm" onclick="top.frames[2].location.href='page2.htm'">Replace the current document with "page1.htm" and loads "page2.htm" in the third frame</a>
Using a button:
<form>
<input type="button" value="Load 3 documents in 3 frames at once"
onclick="top.frames[1].location.href='page1.htm';top.frames[2].location.href='page2.htm';top.frames[3].location.href='page3.htm';">
</form>
Using a function:
You can use a JavaScript function like the one below.
<script type="text/javascript">
<!--
function loadThese(page1,page2,page3){
//the 3 arguments are the pages you want to load
top.frames[1].location.href = page1;
top.frames[2].location.href = page2;
top.frames[3].location.href = page3;
}
//-->
</script>
One way to trigger the function could be:
<body onLoad="loadThese('links.htm','main.htm','footer.htm')">
Targeting more than one frame at a time using another frameset:
By calling a frameset instead of using the two solutions above, one can load different documents in different frames at once without disturbing the object history. If the user clicks his/her browser's back button, the browser will display the exact frameset state he/she is expecting to see.
Replacing the title of a frameset with the title of the document from another frame:
You need to include the following between the head tags of the document after the title container:
<script type="text/javascript">
<!--
top.document.title = document.title;
//-->
</script>
You can declare any value for top.document.title, it can be an arbitrary string, a Recordset value, a variable, etc.
Does not work with all browsers.
Calling the default frameset if my page loads in the browser window without its parent frame:
For Dreamweaver users, extensions are available at Macromedia Exchange.
First, keep in mind that both of these techniques call a default document regardless of the page that triggers the script. The page won't be included into the frameset unless it is already a default document for one of its frames.
To load a page found in an unframed state into the appropriate frame of a frameset see our Section "Going Dynamic" or take a look at Hal Pawluk's web site.
If you want to have a link to show in the document when the page loads without the frameset, include the following between the body tags:
<script type="text/javascript">
<!--
if (self == self.parent) {
document.write('<a href="frameset.htm">This site uses frames, click here to load the frameset</a>')
}
//-->
</script>
If you want to automatically call the default frameset, include the following between the head tags of the document:
<script type="text/javascript">
<!--
if (self == self.parent) {
top.location.href = "frameset.htm";
}
//-->
</script>
If you want to display a message and redirect the user to the frameset after 3 seconds:
<script type="text/javascript">
if (self == self.parent){
document.write('<strong>This document is in an unframed state<br>');
document.write('You will be redirected to our home page in 3 seconds.<strong><br>');
document.write('<META HTTP-EQUIV="refresh" CONTENT="3; URL=frameset.htm">');
}
</SCRIPT>
to make sure that the page is framed by its own frameset, you can replace (self == self.parent) with:
(self == self.parent || (parent.frames[0].name != NameOfMyFirstframe ))
Making sure that another website doesn't "frame" my page[s]:
Dreamweaver users can download my extension Break Out Of frames! v.1.0.0
This Command is a "frame Buster" - there are 2 others at the MM Exchange [one is not to be used in a frameset].
The two scripts below make sure that the document hosting the script is loaded in the topmost window. Of course if you're using a frameset - you need to include the script only into the frameset document itself!
The basic:
<script type="text/javascript">
<!--
if (top != self) top.location.href = self.document.location;
//-->
</script>
This one loads your document in the topmost window but also replaces the active URL in the browser history. Because browsers that don't support the image object don't support the replace() method, we need to check for those first:
<script language="javascript">
<!--
if (top != self) {
if (document.images) {
top.location.replace("http://www.mysite.com/frameset.htm");
}else{
top.location.href = "frameset.htm" ;
}
}
//-->
< /script>
Make sure to use an absolute URL, because in some versions of Opera, a relative reference may throw an error.
Reloading a particular frame:
location.reload() does that for you; you just need to add in front of it the frame or window you want to target.top.location.reload() reloads the topmost window.
To reload a document in the first frame of the frameset [it could be a banner] when a page loads:
<body onload="top.frames[0].location.reload()">
To reload a document in the first frame of the frameset when the user clicks on a link:
<a href="javascript:top.frames[0].location.reload()">reload the Banner</a>
Making my document "stick" into its frame:
Sometimes, it is possible for the user to "move" a document inside a frame using his/her mouse cursor.
This happens when the size of the frame is not big enough to accommodate the content of the hosted document; but in some cases this is not so obvious to the designer.
Most often the problem rises with a banner frame holding image[s].
If you put a 50pixels high image as the only content of a page with the document top margin set to 0 and load that page into a 50pixels high frame you will run into the problem mentioned above.
To fix this, simply add and set the align attribute of the image to top.
Scripting pages ouside the scope of my domain:
Take a look at Section 3 [The limits of the DHTML Object Model]...
Using javascript instead of the HTML 'A' tag to load a page into a specific frame:
The 'A' way:
href="banner.html" target="topframe"
The JavaScript way:
parent.topframe.location.href='banner.html'
This shows you the relationship between the "href" and "target"attributes of the 'A' tag and the construction of the JavaScript statement.
Using "Preview in Browser" with framesets:
Live Data Mode and Preview in Browser do not function if the Live Data server is set to remote. All documents must be uploaded to the Web server prior to previewing the frameset.
Macromedia has released a Tech Note regarding this issue.
the above document doesn't mention that one should modify a default setting in DW's Preferences.
The option "Preview Using Temporary File" in the "Preview in Browser" category must be unchecked, otherwise the frameset loads temporary copies of the documents that are not interpreted by the server.
Creating and Managing framesets in Dreamweaver:
Check this MM's PDF File: "Designing frame-Based Pages".
Getting rid of an horizontal scrollbar that shows only in MSIE:
Add the following attribute/value pair to the frame in the frameset code:
scrollbar=yes
