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 HTML information, check out the HTML category archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)
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 sub-panels 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 links.
4 responses to “One Link to Open Them All”
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.
grim,
Sure! Check the updated article for an example ("Method 3") of how to open multiple frames using only JavaScript ;)
hai really nice information. But i dont know how i have to insert these kind of codes to my blogger. I want to open one more site when a user clicks this site. i.e two blogs have to open with one link. Please kindly explain me how to set up that and give me the exact codes too. Kindly send me the information to mail id. Thank u
Hi vijay,
As much as I would like to help fulfill your request, I am unacquainted with “blogger” and would not even know where to begin with such a task. You may want to try Googling for something along the lines of “how do i edit html code in blogger?” or something similar. The question mark isn’t necessary, but you get the idea. ;)