Targeting windows allows the document writer to assign names to specific windows, and target certain documents to always appear in the window bearing the matching name. Targeting controls where the new document will be displayed when the user follows a link. Most of the time, clicking on a link simply loads a new document in the same window where the link was. In this tutorial we will show you how to deliver the content you want in a new window, or if you are using frames, in another frame.
You should always remember to name your frames before you do anything else.
To open a page in frames using HTML
Use the following format
|
Where option is ‘pagename’. In this case a page will be opened in a frame you named ‘pagename’.
Target attribute also has four predefined values, which can be used as if certain windows and frames already have names without you having to assign them:
_blank | opens a page in a new window. |
_top | loads the linked document in the topmost frame… that is, the new page fills the entire window. |
_self | puts the new document in the same window and frame as the current document. “_self” works the same as if you had not used target attribute at all. |
_parent | is used in the situation where a frameset file is nested inside another frameset file. A link in one of the inner frameset documents, which uses “_parent”, will load the new document where the inner frameset file had been. |
Note that each of predefined names starts with an underscore (“_”). They also must be in all lower-case letters.
Using JavaScript to work with frames
The following examples should be used with an action command. For example onclick, onmouseover etc, or in conjunction with other javascript functions
To open a page in a frame using javascript
"javascript:top.frames['framename'].location = 'filename.html';return true;";
To replace current frameset using javascript
"javascript:top.location = 'filename.html';return true;";
To open a page in a new window using javascript
"javascript:window.open('filename.html');return true;";
Have a look at the example that loads pages 1, 2 and 3 into multiple frames named ‘higher’, ‘main’ and ‘lower’ respectively using HTML and Javascript
<a href="page1.html"
target="upper"
onClick="parent.main.location.href = 'page2.html';
parent.lower.location.href = 'page3.html';
return true;">Multi-Load</A>