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.