Site Development
Downloads
Help!!
Home
Frames In JavaScriptIn the JavaScript hierarchy of objects, frames come right below windows -- navigator.window.top.frame_name. You already know about the "navigator" and "window" object. The "top" object refers to the overall frameset. It generally needs to be placed before a specific frame name. Individual frame's are referred to by their NAME which is given them as an attribute in their <frame> tags. You can name a frame anything you'd like. The "top" object can confuse people. It refers to the overall frameset being referred to, not a window or a specific frame. It's easy to forget this and see the "window" object as the parent element of a specific frame. In fact, the window is the parent of the frameset ("top") which is, in turn, the parent of the individual frames. Frames In The Same WindowWhen you learned to make frames, you learned to load one frame from a link in another using the TARGET attribute in the link's <a> tag. This target would be set to the name of the frame you wanted the HREF loaded in. What if you want to load more than one frame with only one link? Take a look at this page. What is important are the two links in the top frame. Each of these links is coded to load a page in both the left and right frames beneath them. Neat, huh? This is done using JavaScript's "onClick" event in the link's <a> tag and then changing the page(s) by referencing the frame's "location" property. Here's one link's code:
<a href="samp116.htm" target="left" Notice the part in red. You should be familiar with the "onClick" event. Note that the object reference for the specific frame (named "content") begins with "top". We don't need to include "window" or a window name if all of the frames involved are in the same window. We just need to go to the top of the frameset before referencing a specific frame. Another thing to point out is the use of the "location" property. This is the property that changes what's loaded in a specific frame. This can be confusing because frames are initially loaded with a SRC attribute in their HTML tags. JavaScript does not recognize a "src" property for frames. JavaScript uses "location" instead. The above code would use standard HTML methods to load "samp116.htm" in a frame named "left". It also uses the onClick event and "top.content.location='samp117.htm'" to load "samp117.htm" in a frame named "content". You may want to load more frames. In that case, the JavaScript may be a little too bulky to put in the link's <a> tag. Use a function instead. Make up a function name and make a function call in the <a> tag: <a href="javascript:big_load()"> The above would run the JavaScript function "big_load()" when clicked. This function can load as many frames as you'd like. Here's an example of what "big_load()" would look like coded in the page's <head>.
<script language="JavaScript"> The above function would load three frames named "upperframe", "mainframe", and "lowerframe". The generic form for referring to frames in the same window is: "top.frame_name". Frames In Different WindowsYou can also load frames in a different window. This is assuming the windows themselves can communicate with each other. In other words the pages must have a parent/child relationship. It's pretty easy, you just use the window's object reference before the "top.frame_name" we learned in the previous section. Lets say we have a main window with a frame named "left" and one named "right". We have this window open a child window. This child window has a link that would load the "right" frame in the parent window. Here's a link (for the child window) that would do just that:
<a href="javascript:opener.top.right.location='page2.htm'"> Notice the object reference -- "opener.top.right". The "opener" object refers to the parent window. Next, "top" refers to the overall frameset in the parent window. Finally, "right" refers to the specific frame given the NAME "right". The "location='page2.htm'" would load "page2.htm" into the parent windows "right" frame. Summary & Exercises
Try making the sample page from scratch putting the JavaScript statements right in the <a> tags. Next, move these statements to a function and use a function call. Make a four frame page and use one link page to load various pages into the other three frames. Finally, make a framed child window and load different pages into the child window's frames from a single link in the parent window.
|
To refer to a specific frame in JavaScript, you must first reference the overall frameset, or "top" -- top.frame_name.
Back To Beginning JavaScript Index