One Link to Open Them All
Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent (X)HTML information, check out the (X)HTML tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)
Opening Multiple Frames with One Link
Method 1:
The first method of targeting multiple frames involves replacing either the entire frameset (via target="_top") or a subset of frames (via target="subset"). For example, any number of frames may be updated with a single link if that link targets a new frameset containing all of the new frames. Likewise, multiple frames within a nested frameset may be updated by replacing the nested frameset itself. This method works well when many frames need updating. In the following example, the nested frameset, "nested-frameset.html", contains multiple frames that need updating when a single link is clicked. When this happens, the "dynamic" frame is refreshed with multiple new frames, while the "static" frame remains constant. Using this method, virtually any combination of frames or framesets may be updated with a single link.
<frameset cols="*,3*">
<frame src="static-content.html" name="static">
<frame src="nested-frameset.html" name="dynamic">
</frameset>Method 2:
The second method for targeting multiple frames employs JavaScript’s "onClick" function. With this method, the initial frame (or frameset) is updated via the link’s href attribute, while the additional frame(s)/frameset(s) is updated via the link’s onClick attribute. This method requires JavaScript, but is much less convoluted than the method previously discussed. In the following example, when the link is activated, "first-frame" will be updated with first-frame.html, while "second-frame" will be updated with second-frame.html:
<a href="/path/first-frame.html"
target="first-frame" title="Update frames"
onClick="top.second-frame.location='/path/second-frame.html';">
Click here to update both frames.
</a>Method 3:
Our third method of opening/updating multiple frames with a single click utilizes a simple JavaScript function. This method operates through a function call placed in either the href or onclick attribute of the anchor (<a>) element. Upon activation, the JavaScript function proceeds to open simultaneously the specified links. Implementing this technique is straightforward. Given the following frameset:
<html>
<head>
<title>The Frameset</title>
</head>
<frameset cols="50%,50%">
<frame src="page-01.html" name="frame-one" />
<frame src="page-02.html" name="frame-two" />
</frameset>
</html>…with the following code present in page-01.html, which is displayed as frame-one:
<html>
<head>
<title>Frame One</title>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
function openframes() {
parent.frame-one.location="page-03.html";
parent.frame-two.location="page-04.html";
}
//--><!]]>
</script>
</head>
<body>
<p>
<a href="javascript:openframes();" title="Open two links..">
Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
</a>
</p>
</body>
</html>With the previous code in place, the broswer window will display two frames of equal width. In the left frame, there will be a link that, when clicked, will open two links at the same time. Specifically, when the link is clicked, a file named “page-03.html” will replace the contents of the left frame (”frame-one.html”) while a file named “page-04.html” will replace the contents of the right frame (”frame-two.html”). To setup additional frames to open/update upon link click, simply add the corresponding lines to the openframes() function by emulating the existing code pattern. For example, to add another three frames to the function:
function openframes() {
parent.frame-one.location="page-03.html";
parent.frame-two.location="page-04.html";
parent.frame-thr.location="page-05.html";
parent.frame-for.location="page-06.html";
parent.frame-fiv.location="page-07.html";
}Finally, to account for users without JavaScript, we could call the function via onclick attribute, include an alternate frameset or page via the href attribute, and throw in a return false declaration for good measure:
<a href="../no-javascript.html" onclick="javascript:openframes();return false;">
Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
</a>Beyond frames..
Using the onClick attribute within links, it is possible to target more than just frames. For example, Monzilla’s Information theme for WordPress features subpanels that "pop" open to reveal various types of content. To improve usability, we wanted certain panel links to open their panels while simultaneously repositioning the top of the panel with the top of the browser. This was easily accomplished with an onClick attribute in each of the panel links1.
References
- 1 To check out the "popping" subpanels used in the Information theme, click here, scroll down near the bottom of the page, and click on either the "nonsense" or "details +" tabs. The single link click should result in two events happening simultaneously: the subpanel will pop open and the subpanel will align its top edge with the top of the browser window.
Related articles
- The Friendliest Link Targets in the Neighborhood
- HTML Frames Notes Plus
- Open External Links as Blank Targets via Unobtrusive JavaScript
- Protect Your Site Against UserCash and Other Scumbags
- Absolutely Centered Layout
- Exploring the (X)HTML Link Element
- Bare-Bones HTML/XHTML Document Templates
About this article
This is article #214, posted by Jeff Starr on Wednesday, October 04, 2006 @ 01:25pm. Categorized as Function, and tagged with code, frames, html, javascript, links, markup, tricks, xhtml. Updated on April 13, 2008. Visited 21163 times. 4 Responses »
Bookmark • Subscribe • Explore
« October 2006 • Up • Basic DOS Commands »
1 • June 23, 2007 at 4:13 pm — grim repour says:
Hi nice site. Would you please provide an example of how to do it (frames) with only JavaScript. I know you have theme example, but a real one is the best. Thankyou.