2016-10-13 00:16:48 点击量:99 标签: 收藏本文
web开发的工作中我们难免会遇到使用iFrame这个标签，有时候iFrame的高度我们要让它自动的去适应内容的高度，防止出现滚动条，利于页面的美化。下面将接受iframe动态调整高度的方法。
1、同域下的iframe自适应高度
同域下父页面内的js能获取到iframe页面的高度，所以在iframe加载完后获取下高度就行了
例如
<iframe src="url" id="Iframe" frameborder="0" scrolling="no" style="border:0px;width:1000px;" onload="autoHeight();"></iframe> 
<script type="text/javascript"> 
function autoHeight(){ 
var iframe = document.getElementById("Iframe"); if(iframe.Document){//ie自有属性 iframe.style.height = iframe.Document.documentElement.scrollHeight; }else if(iframe.contentDocument){//ie,firefox,chrome,opera,safari iframe.height = iframe.contentDocument.body.offsetHeight ; 
} 
} </script>
如果是同一个域名下的不同子域，设置下document.domain就行了
IE6和IE7中的iframe没有contentDocument属性，而且如果iframe里的页面在同域下的不同子域,通过iframe.Document.documentElement.scrollHeight获取到的高度是错误的，所以还是建议用 iframe.contentwindow.document来获取高度
2、跨域下的iframe自适应高度
跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下：假设www.studyofnet.com下的一个页面url1要包含 http://www.baidu.com下的一个页面url2。
我们使用url1下的另一个页面url11来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。
具体示例如下
// url1中包含iframe: <iframe src="http://www.baidu.com/url2" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe> // 在url2中加入如下代码： <iframe id="c_iframe" height="0" width="0" src="http://www.studyofnet.com/url11" style="display:none" ></iframe> <script type="text/javascript"> (function autoHeight(){ var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth); var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); var c_iframe = document.getElementById("c_iframe"); c_iframe.src=\\'#\\'" })(); </script> // 最后，agent.html中放入一段js: <script type="text/javascript"> var b_iframe = window.parent.parent.document.getElementById("Iframe"); var hash_url = window.location.hash; if(hash_url.indexOf("#")>=0){ var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; b_iframe.style.width = hash_width; b_iframe.style.height = hash_height; } </script>
我们是一家提供综合软件外包与弱电工程服务的技术公司。
业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。
公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室