Question

I am working on web application which contains different number of nested frames and iframes.
Currently when web page renders browser renders scroll bars against them. Sometimes count is 4-5 scroll bar in a page which looks very ugly. So I want to remove these scroll-bars through Javascript.

To understand the problem, Please see below example of web page with frame/iframe hierarchy.

 Frame1
       --Frame2
       --Frame3
              --Frame4
              --Frame5

My approach :
Start from the root document and search all frames/iframes from the page and put these frame node in Array with additional variable called level.
After completion of this I am sorting the array on level. So after this activity array will look like.Below

     0> Frame5 node, level=3
     1> Frame4 node, level=3
     2> Frame3 node, level=2
     3> Frame2 node, level=2
     4> Frame1 node, level=1

After this I am considering two option to remove scroll-bar

Option #1 :
start from 0th element from array and get scrollheight of frame and set it to height property of Frame.

var frameScrollHeight=Frame5.contentWindow.document.body.scrollHeight;
Frame5.style.height =frameScrollHeight;

Do same procedure for every frame in array.
My assumption here is that If innermost frames height changes, Its parent nodes scroll Height must changes to true scrollheight.
e.g After setting the Frame5 and Frame4 height. when we fetch scrollheight of Frame3 it must be Frmae5 height +Frame4 height. But now its not reflecting the true scrollheight.
I am not sure what is wrong here. When we set Frame5 and Frame 4 height will Dom refreshes immediately? .
Am i using wrong property? because I verified all other proprieties also using script debugger like clientHeight,offsetHeight but no one equivalent to Frame5 height+ Frame4 height.

Option #2
As above approach is not working correctly I took another approach of adding previous level frames height manually and set it to parent node in next level.
e.g Get scrollheight of Frame5 and Frame4 and set it to Frame3 Also add height of Frame3 and Frame2 and set it to Frame1.

Option two is working now but still it has some drawback like all frames must be in hierarchical order and must not be in parallel to each other.

Also when I am setting scrollheight as height to Frame scroll-bar still appears as it is and I have to add some constant like 15 to scrollheight. So actual code is like

var frameScrollHeight=Frame5.contentWindow.document.body.scrollHeight+15;
Frame5.style.height =frameScrollHeight;

I don’t know what this 15 is. Is it a frameborder? Can I get this constant using any property of frame?

I will prefer option 1 but don’t know why this is not working.
If there is any other way to solve this problem please suggest.

Answer 1

I had the same problem and the following function (using jquery) worked for me after I converted all frames to iframes. This function will resize every frame so that there is no need for scrollbars:

var resizeFramesSoAllContentVisible = function (win) {
    for (var i = 0; i < win.frames.length; i++) {
        var frame = win.frames[i];
        var contentWindow = frame.contentWindow ? frame.contentWindow : frame.window;
        resizeFramesSoAllContentVisible(contentWindow);
    }

    if (win.frameElement) {
        var myFrameOuterHeight = $(win.frameElement).height();
        var myFrameInnerHeight = $(win.document).height();
        var myFrameOuterWidth = $(win.frameElement).width();
        var myFrameInnerWidth = $(win.document).width();

        if (myFrameOuterHeight != myFrameInnerHeight) {
            $(win.frameElement).height(myFrameInnerHeight);
        }
        if (myFrameOuterWidth != myFrameInnerWidth) {
            $(win.frameElement).width(myFrameInnerWidth);
        }
    }
}