网站地图
【www.gdgbn.com--浏览器】
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行js取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行js，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果js去操作dom引起的高度变化，都不太方便
iframe 自适应高度
<script type="text/网页特效">
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);function checkheight() {
var iframe = document.getelementbyid("frame_content");
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
alert("bheight:" + bheight + ", dheight:" + dheight);
}
</script>
注意id和onload
然后加上一个js
详细讲一下
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从 而不刷新页面的情况下更新页面的部分数据成为可能，可是iframe的大小却不像层那样可以"伸缩自如"，所以带来了使用上的麻烦，给iframe设置高 度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种iframe动态调整高度的方法，主要是以下js函数：
程序代码
function setwinheight(obj)
{
var win=obj;
if (document.getelementbyid)
{
if (win && !window.opera)
{
if (win.contentdocument && win.contentdocument.body.offsetheight)win.height = win.contentdocument.body.offsetheight;
else if(win.document && win.document.body.scrollheight)
win.height = win.document.body.scrollheight;
}
}
}
最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配
程序代码
根据上面的总结，来一个超简单的
在页面中加入
<script for=window event=onload language="jscript">
document.all("test").height=test.document.body.scrollheight;
</script>
自适应宽度类似：在script中加入
document.all("test").width=test.document.body.scrollwidth;
最后总结一下
什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做dom动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
看个实例
我与a页面不同域，页面高度不会变化
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
test2
asdasdasd
<script>
(function(){
var agent_iframe = document.createelement("iframe"),
b_height = math.max(document.documentelement.scrollheight,document.body.scrollheight);
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height;
document.body.appendchild(agent_iframe);
agent_iframe.style.display = "none";
})();
</script>