Databases
StackOverflow2013
Postsdbo
POHow to remove scrollbar of nested frames and iframes using Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to remove scrollbar of nested frames and iframes using Javascript
    text
    copied!<p>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.</p> <p>To understand the problem, Please see below example of web page with frame/iframe hierarchy.</p> <pre><code> Frame1 --Frame2 --Frame3 --Frame4 --Frame5 </code></pre> <p><strong>My approach :</strong> 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</p> <pre><code> 0&gt; Frame5 node, level=3 1&gt; Frame4 node, level=3 2&gt; Frame3 node, level=2 3&gt; Frame2 node, level=2 4&gt; Frame1 node, level=1 </code></pre> <p>After this I am considering two option to remove scroll-bar</p> <p><strong>Option #1</strong> : start from 0th element from array and get scrollheight of frame and set it to height property of Frame.</p> <pre><code>var frameScrollHeight=Frame5.contentWindow.document.body.scrollHeight; Frame5.style.height =frameScrollHeight; </code></pre> <p>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.</p> <p><strong>Option #2</strong> 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.</p> <p>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.</p> <p>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</p> <pre><code>var frameScrollHeight=Frame5.contentWindow.document.body.scrollHeight+15; Frame5.style.height =frameScrollHeight; </code></pre> <p>I don’t know what this 15 is. Is it a frameborder? Can I get this constant using any property of frame?</p> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload