7.7 Reading a Frame's Dimensions

NN 6, IE 4(Win)/5(Mac)

7.7.1 Problem

You want to know the precise pixel dimensions of a frame after the frameset is rendered.

7.7.2 Solution

Because it is not uncommon to specify a percentage or * wildcard character for one or more frame size specifications, the actual rendered size is unknown until the browser completes all of its calculations for rendering. A script running in one of the frames can access the interior dimensions of any sibling frame (and its own frame) with the following function:

function getFrameSize(frameID) {
    var result = {height:0, width:0};
    if (document.getElementById) {
        var frame = parent.document.getElementById(frameID);
        if (frame.scrollWidth) {
            result.height = frame.scrollHeight;
            result.width = frame.scrollWidth;
        }
    }
    return result;
}

The function returns an object with height and width properties containing the rendered pixel measures of the frame whose ID is passed as a parameter. You get accurate readings in IE 4 or later for Windows and Netscape 7 or later. IE for Macintosh through Version 5.x provides accurate readings when the frame in question does not have scrollbars. When scrollbars are present, the returned sizes are reduced by the thickness of the scrollbars. Unfortunately, no property reveals whether a scrollbar is visible in the frame if the frame's scroll attribute defaults to the auto setting.

7.7.3 Discussion

The keys to making the function work include referencing the parent (or top) of the individual frames and the actual frame element as opposed to the frame-as-window object. Thus, the more common parent.frameName or parent.frames["frameName"] types of reference will not suffice. By referencing the frame element directly, you get the browser to report the rendered size of the element, irrespective of the content of the frame.

You can also install this function inside the frameset document's script. But you must then remove the reference to the parent in the fourth line of the function. Because the script already operates in the parent, its own element collection includes the frame elements. You can install this function in the frameset, yet still invoke it from one of the frames, as in:

var frameSize = parent.getFrameSize("myFrame4");

The parent window is part of the equation in one form or another.

7.7.4 See Also

Recipe 7.8 for resizing a frame under script control.