87,910
社区成员
发帖
与我相关
我的任务
分享iframe高度自适应问题，请教高手
现在做项目遇到一个问题，研究几天仍无进展，现在网站框架布局采用上中下，中间又分左右，左边导航，右边内容，现在我用js写了自使用高度的脚本，不采用滚动条，如果右边内容过长，再打开内容短的页面，在IE6中下面会显示一大片空白，然后才是低层框架布局，请高手指导
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2014-05-12
- 打赏
- 举报
要在你获取高度前设置 iframe.style.height = 'auto'这句。。获取高度后在设置没意义了
Derron8 2014-05-12
- 打赏
- 举报
多谢~多谢~ 鼓捣了两三天，终于解决了，万分感谢~
Go 旅城通票 2014-05-12
- 打赏
- 举报
没问题。。
<div id="container">
<div id="top">
<iframe name="topFrame" id="topFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="1000" height="100%" src="top.jsp" > </iframe>
</div>
<div id="left" style="background:#eee">
<iframe name="leftFrame" id="leftFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="175" height="100%" src="left.jsp" > </iframe>
</div>
<div id="main" style="border:solid 1px #000">
<iframe name="mainFrame" id="mainFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="100%" height="100%" src="javascript:void(0)" onload="resizeFrame2(this)" > </iframe>
</div>
</div>
<a href="javascript:resizeFrame(1500)">1500px</a> <a href="javascript:resizeFrame(300)">300px</a>
<style>
#top {
width: 1000px;
height: 115px;
clear: both;
}
#left {
width: 190px;
height: 600px;
float: left;
}
#main {
width: 810px;
height: 100%;
float: left;
}
#footer {
width: 100%;
height: 100%;
clear:both;
margin: 20px 0;
}</style>
<script>
function resizeFrame(h) {
var iframe = document.getElementById("mainFrame");
//var iframe2 = document.getElementById("leftFrame");
try {
/////////////////内容模拟
var doc = iframe.contentWindow.document;
var div = doc.getElementById('dv');
if (!div) {
div = doc.createElement('div');
div.id = 'dv'
div.style.border = 'solid 1px black';
doc.body.appendChild(div);
}
div.style.height = h + 'px';
//////////////////////////////////
iframe.style.height = 'auto'
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.style.height = Math.max(600, height) + 50;
//iframe2.height = height;
// alert("main b:" + bHeight + " d:" + dHeight + " f: " + height);
// alert(iframe.height);
} catch (ex) {
}
//window.location.reload();
}
</script>
hellNo 2014-05-12
- 打赏
- 举报
我是这么用的，你试试？？？
<iframe style="display: block;" id="frame" src="frame.html" scrolling="no" frameborder="0" width="100%" onload="this.height=document.getElementById('frame').contentWindow.document.body.scrollHeight;"></iframe>
Derron8 2014-05-12
- 打赏
- 举报
是同域名的，JS如下：
function resizeFrame(){
var iframe = document.getElementById("mainFrame");
//var iframe2 = document.getElementById("leftFrame");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.min(bHeight, dHeight);
iframe.height = Math.max(600, height) + 50;
//iframe2.height = height;
alert("main b:"+bHeight+" d:"+dHeight + " f: "+height);
alert(iframe.height);
}catch (ex){
}
//window.location.reload();
}
IE6试过很多种方法，都不凑效。。。
Derron8 2014-05-12
- 打赏
- 举报
还是不行的， 我附代码给你看下：
<body>
<div id="container">
<div id="top">
<iframe name="topFrame" id="topFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="1000" height="100%" src="top.jsp" > </iframe>
</div>
<div id="left">
<iframe name="leftFrame" id="leftFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="175" height="100%" src="left.jsp" > </iframe>
</div>
<div id="main">
<iframe name="mainFrame" id="mainFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="100%" height="100%" src="../center/mainPage_mode1.jsp" onload="resizeFrame2(this)" > </iframe>
</div>
<%@include file="../footer.jsp" %>
</div>
</body>
CSS代码如下：
#top {
width: 1000px;
height: 115px;
clear: both;
}
#left {
width: 190px;
height: 600px;
float: left;
}
#main {
width: 810px;
height: 100%;
float: left;
}
#footer {
width: 100%;
height: 100%;
clear:both;
margin: 20px 0;
}
JS如下:
function resizeFrame(){
var iframe = document.getElementById("mainFrame");
//var iframe2 = document.getElementById("leftFrame");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.min(bHeight, dHeight);
iframe.height = Math.max(600, height) + 50;
//iframe2.height = height;
alert("main b:"+bHeight+" d:"+dHeight + " f: "+height);
alert(iframe.height);
}catch (ex){
}
//window.location.reload();
}
IE8及ff是没问题的， 就是IE6， 烦死了。。。。
jiangbai333 2014-05-12
- 打赏
- 举报
简单明了 这个好！
不想离开水的鱼 2014-05-12
- 打赏
- 举报
是同域名的不？
如果是同域名的话，可以在iframe里页面加载完后计算出高度，比如（currentheight），然后通过父级页面的控制iframe高度
比如（parent.document.getElementById("iframe_id").height=currentheight)
如果域名不同，之前帮人解决过一个类似问题，我总结了一下，给你参考
http://blog.csdn.net/ivyandrich/article/details/24372909
Go 旅城通票 2014-05-12
- 打赏
- 举报
先设置iframe的height为auto，在设置实际的height值试试
ifr.style.height='auto';
ifr.style.height='计算加载的页面得到的内容，记得加单位px';
