解决iframe高度自适应各种方法
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] iframe高度自适应有很多种方法可以实现了，下面小编来给大家总结一些常用并且兼容性比较好的iframe高度自适应实例程序，希望这些对大家会有所帮助。...
|
今天帮一哥们的女朋友的亲戚整个网站，用的dedecms弄的，有段时间没接触dede了，感觉有点生疏，不过还好网站功能一般，所以花了半天时间给整出来了。在最后，由于该cms的留言板模块是独立出来的，我为了省事，就在一个页面用了iframe直接引用留言板的页面进来，可问题就出现了，就是高度不能自适应，给它定死高度吧，不太灵活，于是在网上搜了下iframe自适应高度的解决方法，搜了很多都是N年前的信息，有些早已不起作用了。但功夫不负有心人，最后还是让我找到了这个解决办法，仅在此记录一下吧！
| 代码如下 |
复制代码 |
|
<iframe id="frame_content" src="guestbook.php" scrolling="no" width="950" frameborder="0" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe () {
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
|
今天拓源给大家分享iframe自适应高度的方法。
iframe的宽度默认为300px，高度默认为150px，如果需要自适应高度，则需要使用以下代码：
需要注意的是，frameresize()方法必须放置在iframe代码的后面，否则无效。
| 代码如下 |
复制代码 |
|
<iframe id="iframepage" name="iframepage" width="100%" height="100%" src="http://www.111cn.net/" allowTransparency="true" style="border:none; overflow-x:none;" scrolling="auto"></iframe>
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
function frameresize(){
var winheight = $(window).height();
var iframeheight = winheight;
$('#iframepage').css('height', iframeheight + 'px');
};
if(window.attachEvent){
document.getElementById("iframepage").attachEvent('onload', frameresize);
}
else{
document.getElementById("iframepage").addEventListener('load', frameresize, false);
}
$(window).resize(frameresize);
frameresize();
</script>
|
以上iframe代码为调用拓源网旗下网站乌龙猫的首页，可以看到iframe高度自适应 |
