iframe框架自适应高度多种方法介绍
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] iframe框架自适应高度这个问题有很多朋友写了非常不错的一些解决办法，下面我一些不错的iframe框架自适应高度的代码收藏起来给大家参考。...
|
HTML代码：
| 代码如下 |
复制代码 |
|
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>
|
Javascript代码：
| 代码如下 |
复制代码 |
|
<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的页面：
| 代码如下 |
复制代码 |
|
<iframe src="main.asp" width="557px" height="100%" name="Mainv" id="Mainv" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="border:#FFFFFF"></iframe>
|
然后在每个要在Iframe中显示的页面上，
| 代码如下 |
复制代码 |
|
<body onload="parent.document.all.Mainv.height=getTotalHeight();">
|
然后在页面底部加入
| 代码如下 |
复制代码 |
|
<div id="theEnd" style="position:relative"></div>
<script language="JavaScript">
function getTotalHeight(){
return document.getElementById("theEnd").offsetTop+10;
}
</script>
|
同域下的iframe自适应高度
同域下父页面内的js能获取到iframe页面的高度，所以在iframe加载完后获取下高度就行了
| 代码如下 |
复制代码 |
<iframe src="./ue.html" 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来获取高度（added at 2010-03-22）
2.跨域下的iframe自适应高度
跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。
a.html中包含iframe:
| 代码如下 |
复制代码 |
|
<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
|
在c.html中加入如下代码：
| 代码如下 |
复制代码 |
|
<iframe id="c_iframe" height="0" width="0" src="http://www.a.com/agent.html" 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>
|
|
