开发者

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 ap开发者_Go百科plication</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 completely fill the entire parent.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜