javascript - How to hide the parent vertical scrollbar after an iframe is loaded?

I have attached the sample code which demonstrates the problem. I am checking this in Firefox 3.5.7. The problem is the parent HTML has a scrollbar, and it loads an iframe which is fullscreen (height: 100%, width: 100%), I want the parent scrollbar to be removed after the iframe is loaded.

1) Is this possible to do? 2) When we give height: 100%; width: 100% why does it occupy only the view area? But not the full parent occupied area?

This is Main.html
        <Html>
    <head>
        <script type="text/javascript" src="client.js"></script>
        <title>
            I am a client
        </title>    
    </head>
    <body bgcolor="#000000">
        You can see the iframe below...
        You can see the iframe below...
        You can see the iframe below...<br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br><br>
        <br><br><br><br><br><br>
        You can see the iframe below...
        <br>

        <iframe name="clientframe" id = "clientframe" src = "app.html" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:999;background:#ff0000" 
        onload = "sendparams();" frameborder="no">
        </iframe>    
    </body>
    </html>

This is app.html:
<HTML>
<HEAD>
    <title> 
        I am an Application
    </title>
</HEAD>
<BODY>
    <h3>This is an application</h3>
    <br>
    You name <input type="textbox"> <br>
    Password <input type="password"><br>
    <br>
    <br>
    <input type="button" value ="Let me in">
</BODY>

</HTML>

NOTE: Open the Main.html, it will load the app.html in a iframe. You can notice that after iframe is loaded a scroll bar appears, and the red background for the iframe does not pletely fill the entire parent.

1) Is this possible to do? 2) When we give height: 100%; width: 100% why does it occupy only the view area? But not the full parent occupied area?

This is Main.html
        <Html>
    <head>
        <script type="text/javascript" src="client.js"></script>
        <title>
            I am a client
        </title>    
    </head>
    <body bgcolor="#000000">
        You can see the iframe below...
        You can see the iframe below...
        You can see the iframe below...<br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br><br>
        <br><br><br><br><br><br>
        You can see the iframe below...
        <br>

        <iframe name="clientframe" id = "clientframe" src = "app.html" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:999;background:#ff0000" 
        onload = "sendparams();" frameborder="no">
        </iframe>    
    </body>
    </html>

This is app.html:
<HTML>
<HEAD>
    <title> 
        I am an Application
    </title>
</HEAD>
<BODY>
    <h3>This is an application</h3>
    <br>
    You name <input type="textbox"> <br>
    Password <input type="password"><br>
    <br>
    <br>
    <input type="button" value ="Let me in">
</BODY>

</HTML>

Share Improve this question asked Feb 2, 2010 at 8:32 Manohar 1,3307 gold badges17 silver badges28 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Hide the Parent window scroll bar when iframe is loaded

put this script at top of the Main.html

<script type="text/javascript">
 function sendparams() {
 document.body.style.overflow = "hidden";
 }
</script>

The scrollbars will not hide because your IFrame's height if fixed but the text "You can see the iframe below..." last one crosses the height.

If you remove few (atleast two rows of) <br> then it will work fine as per your requirement.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to hide the parent vertical scrollbar after an iframe is loaded? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)