欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iframe内容自适应高度

程序员文章站 2022-04-17 22:43:30
...
一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了。
完美版Iframe自适应高度====>推荐使用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title>iframe高度自适应</title> <style> *{margin:0; padding:0;} html,body{height:100%;} .header{width: 100%;height:50px;background: #11c1f3; } .container{padding:0 0 0 200px;overflow: hidden;} .container .main{position:absolute; width:auto; height:auto; top:50px; left:200px; right:0; bottom:0; overflow:hidden;} .container .left{width:200px; height:auto; background:#ef473a; position:absolute; left:0; top:50px; bottom:0; overflow: auto;} </style> </head> <body> <div class="header">顶部导航区域...</div> <div class="container"> <div class="main"> <iframe class="mainFrame" src="http://www.cnblogs.com/leyi" width="100%" height="100%" frameborder="0"></iframe> </div> <div class="left">左侧导航区域...</div> </div> </body> </html>

 

 table版Iframe自适应高度打造高度自适应的后台布局框架=====> 

<style>
    *{ margin:0; padding:0}
    body, html{ height:100%; width:100%; overflow:hidden;} /*这个高度很重要*/
    #frametable .header{ height:40px; background:#ddd; border-bottom:2px solid #999;}
    #frametable .left{ width:150px; border-right:2px solid #999; background:#ddd; height:100%;}
</style>

<table id="frametable" cellpadding="0" cellspacing="0" width="100%" height="100%" style="width: 100%;">
    <tr>
        <td colspan="2" height="40">
            <div class="header">
                <!-- header menu -->
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" width="150" height="100%"> <!--这个高度很重要-->
            <div class="left"><!-- left menu --></div>
        </td>
        <td valign="top" width="100%" height="100%"> <!--这个高度很重要-->
            <iframe id="iframe" name="main" src="http://www.baidu.com" width="100%" allowtransparency="true" width="100%" height="100%" frameborder="0" scrolling="yes" style="overflow:visible;"></iframe>
        </td>
    </tr>
</table>

 

    

操作iframe=====>

    contentWindow //所有浏览器都支持的
    contentDocument //ie 6 7 不支持
    document.getElementById('iframe_id').contentWindow.document.getElementById('子页面元素节点');
    window.parent  //子frame操作父级页面
    window.parent.document.getElementById('父页面元素节点').style.cssText=..
    window.top //获取最顶层一级页面
    window.top.document.getElementById('最顶层页面元素节点').style.cssText=..
    //防止被嵌套:
    if(window!=window.top){
        window.top.location.href=window.location.href
    }

 

iframe的传值方式=====>
1、jsonp
2、localstorage
3、postMessage