今天学生问了一个框架高度自适应的问题,一开始,我认为很简单,主要是是框架上中下,三个,中间必然要有滚动条,是不可能自适应的.后来仔细想了想,Frame如果处理,就算去掉下面的,肯定也有滚动条出现.
而Iframe呢?Iframe应该可以自适应的吧.
所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
到baidu和google一查,这方面的解决答案是非常的多,逐一尝试了一下,发现了几个问题,一是在各种IE兼容性不好,一是不支持多个Iframe在同一页面自适应,一是更新一个页面后,无法自动根据新页面高度刷新自适应,一是无法跨站调用.
研究了半天终于写出了解决方案:
web1,web2,web3 是上中下,三个需要自适应的页面,在主页面index.html中进行逐个的iframe调用,要求各自高度在iframe区域中能够自适应.
(1) 如果同时调用多个Iframe,也需要自适应,就只能从各个iframe调用的文件下手:
主调用页面index.html就可以这样写了:
========
<html>
<body>
<P>
<iframe name="web" id="web1" width="100%" scrolling="no" frameborder=0 src="/blog/intop.html"></iframe>
<iframe name="web" id="web2" width="100%" scrolling="no" frameborder=0 src="/blog/inmain.html"></iframe>
<iframe name="web" id="web3" width="100%" scrolling="no" frameborder=0 src="/blog/inlow.html"></iframe>
</body>
</html>
=============
在web1:inmain.html .web2:inmain.html.web3:inlow.html的三个页面的head区中分别写入:
=========
<script language="JavaScript">
<!--
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px";
if(document.documentElement&&document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = a[i].parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
//window.attachEvent("onresize", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAutoFit, false);
//window.addEventListener('resize', iframeAutoFit, false);
}
//-->
</script>
=========
当然你也可以写1个js,在需要的页面中调用一下就可以了.
------------------
可以再绑定一个事件,让页面可以自动刷新:
window.onload = function() {
var iframe = document.getElementById("iframe的id");
iframe.onreadystatechange = function() {
if (iframe.readyState == "complete") {//for IE
iframe.height = frames["frame的name"].document.body.scrollHeight;
}
}
iframe.onload = function() {//for Firefox
iframe.height = frames["frame的name"].document.body.scrollHeight;
}
}
-------------------
不过第1种方法,跨站调用肯定是不行的了?除非你能改跨站后的目标面页加入这段脚本哈.
(2) 如果只调用一个iframe页面 可以这样写:
==========index.html
<html>
<body onload="resizeHeight();" onResize="resizeHeight();">
<!--这个是为了自动加载js函数和更新后,Iframe自动更新高度再次自适应-->
<P>
<script language="javascript">
function resizeHeight()
{
document.getElementById("web").style.height = parseInt(document.body.clientHeight-50);
}
</script>
<!--这个是为了高度再次自适应,控制iframe id,和下面的对应.-->
<iframe name="web" id="web" width="100%" scrolling="no" frameborder=0 src="/blog/intop.html"></iframe>
<!--iframe标记,页面自已做吧,可以分别做高一些看效果-->
</body>
</html>
===============
经测试在IE7下,测试通过.
其它解决方法参考:
http://tiantainanhai.blog.163.com/blog/static/37085911200952493946479/
http://topic.csdn.net/u/20070323/10/8ba55b17-eab4-4075-a34d-50b4c68258be.html
http://www.sea-see.com.cn/2009/10/14/iframe/
