解决iframe周围的空白问题 td自适应iframe高度

最新推荐文章于 2018-07-22 13:39:56 发布

weixin_33853794

最新推荐文章于 2018-07-22 13:39:56 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/means-sisy/p/3668967.html

本文详细介绍了如何通过JavaScript函数自适应调整iframe高度，确保页面布局的灵活性与响应性，适用于不同屏幕尺寸的设备。

页面：

 <td style="width: 70%;height: 100%" id="tdRecordDetail">
           <iframe id="right" name="right" src="" width="100%" frameborder="0"  style="width: 100%;height: 100%;margin: 0;padding: 0;"frameborder="0" 　　　　　　　　　　marginheight="0"  marginwidth="0" ></iframe>
 </td>

iframe要引用的SRC对应的页面需要在body中设置

<body topmargin="0" leftmargin="0">
.....
</body>

自适应问题：

 <script>
            function resize(obj){
                 var iframeHeight=document.frames[obj.name].document.body.scrollHeight; 
                 document.getElementById("mainFrameTd").style.height=iframeHeight;
            
            }
 </script>

<td  id="mainFrameTd" width="414" align="center" valign="top">
            <iframe frameborder="0" name="index_main"  id="index_main"  onload="resize(this);" src="${getUrl()}" style="width:100%; height:100%" 
　　　　　　　　scrolling="no">
　　　　　　 </iframe>
</td>