7.2 Changing the Content of One Frame from Another

NN 2, IE 3

7.2.1 Problem

You want a script in one frame to change the document in another frame.

7.2.2 Solution

Assign the URL to the location.href property of the sibling frame with the following syntax:

parent.otherFrameName.location.href="newPage.html";

Replace otherFrameName with the name assigned to the name attribute of the <frame> tag designated for that other frame in the framesetting document.

7.2.3 Discussion

You don't need JavaScript at all to load a page into another frame if the user is clicking on a hyperlink. Instead, assign the frame's name to the target attribute of the <a> tag, and let the href assignment handle the navigation part:

<a href="products.html" target="content">Product Catalog</a>

On the other hand, if you want your pages to validate under strict XHTML, the target attribute is not allowed for hyperlink elements (your framesetting document also wouldn't validate under strict XHTML, but you might be satisfied with letting that document validate under the frameset version of XHTML 1.0).

If you need a target attribute but can't use it due to validation conflicts, you can use scripts to fill in the target attribute values after the page loads. Assign an onload event handler to the page so that a function assigns frame names to the target properties of all links on the page. Thanks to the document.links collection found in every HTML page, a script can easily loop through them all and assign the values as needed. You can even segregate links that are to be loaded into another frame from those that are to replace the current frame: use the class attribute of the a elements to divide the elements into two classes. The following function (for IE 4 or later and NN 6 or later) assigns the content frame target to those links whose class attributes are set to other:

function setLinkTargets( ) {
    for (var i = 0; i < document.links.length; i++) {
        if (document.links[i].className =  = "other") {
            document.links[i].target = "content";
        }
    }
}

Bear in mind that client-side image map area elements are also counted among the document.links collection. Include them or not in this scripted assignment task, as your design requires, by choosing which area elements have their class attributes assigned in the HTML code.

7.2.4 See Also

Recipe 7.3 to change multiple frames from one user action; Recipe 7.4 for replacing the current frameset with an entirely new document or frameset.