javascript原生和jquery库实现iframe自适应高度和宽度，jqueryiframe

文章由Byrx.net分享于2019-03-22 05:03:58评论（156）

javascript原生和jquery库实现iframe自适应高度和宽度，jqueryiframe

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码！

‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

基于Jquery库的代码很好实现：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#mainframe").load(function(){ 
$(this).height(0); //用于每次刷新时控制IFRAME高度初始化 
var height = $(this).contents().height() + 10; 
$(this).height( height < 500 ? 500 : height ); 
}); 
}); 
</script>

‍基于JS原生代码的实现：

<script language="javascript"> 
if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script>

只需在你被iframe调用的文件</body>之后加入上面这段即可!
这个也可以控制iframe的高度随内容的多而自动增长

<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>

jquery库实现iframe自适应内容高度和宽度

iframe自适应高度

通过js 来控制自适应高度；
html代码：

<iframe src="需要连接的iframe地址" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>
js代码：
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>

iframe自适应高度是怎实现的

实现方法很简单：

假设Parent.Asp 包含有一个名为 News 的Iframe.Asp，那么在Parent.asp我们如下设置
<table border=1>
<tr>
<td id=iHeight>
<iframe name="news" width=100% height=100% src="Iframe.Asp" frameborder=no scrolling=no ></iframe>
</td>
</tr>
</table>

在Iframe.Asp里<body>写入如下代码：

<body onload="parent.document.all.iHeight.height=this.document.body.scrollHeight+10;">

通过以上即可达到Iframe的高度及大小随帧内容的大小而自动改变的效果，而不会影响你原来页面效果，非常方便！

演示地址为：

热门文章：

javascript原生和jquery库实现iframe自适应高度和宽度，jqueryiframe