设为首页   |  加入收藏夹 快速导航:  热门文章  |  最新文章  |  梦想博客  
当前位置:编程之家 -> 文章频道 ->html 
站内搜索:  

关于IFRAME自适应高度的研究(3)

作者:佚名 来源:互联网 整理日期:2008-06-21

//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文结束
3.动态改变框架高度。
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文
<iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj"></iframe>

  test.asp页面head间增加如下JS代码
<SCRIPT LANGUAGE="JavaScript">
function f_frameStyleResize(targObj){
 var targWin = targObj.parent.document.all[targObj.name];
 if(targWin != null) {
 var HeightValue = targObj.document.body.scrollHeight
 if(HeightValue < 600){HeightValue = 600}
 targWin.style.pixelHeight = HeightValue;
 }
}

function f_iframeResize(){
 bLoadComplete = true; f_frameStyleResize(self);
}

var bLoadComplete = false;
window.onload = f_iframeResize;
</SCRIPT> <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文结束
4.通过parent引用本页面的框架,改变高度。
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文
要在嵌入式帧中head之间加上如下代码,即可实现自适应高度:)测试有效。

<SCRIPT language=javascript>
function window.onload() {

if(top.location != self.location){

var a = window.parent.document.getElementsByTagName(iframe);

for (var i=0; i<a.length; i++){

if (a[i].name == self.name) {a[i].height = document.body.scrollHeight; return;}}}

}
</SCRIPT>

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文结束


五.IFrame自扩展的基本原理:
 说到Iframe的自扩展。无非是动态的改变Iframe.height(Iframe.style.height);
当Iframe中文档发生变化时,可以在iframe.onload()(至少IE5.5)方法中动态的改变
Iframe的高度为其中载入的文档的高度(windo.document.body.scrollHeight);
 总之就是使Iframe的显示高度,根据其中的文档的高度变化而动态变化。
 上面的几种解决方法,基本都可以实现单个Iframe的动态变化,如果有问题,
自己可以调试以下,或者查看版本是不是支持某些方法和属性。原理就是这样了。

六.我的问题及解决方法。

我在页面main.htm中包含框架<iframe id="main" name="main" src=t1.htm></iframe>
 其中,通过main.htm导航条,动态调整main iframe的内容。实现功能导航。
  t1.htm中也包含框架<iframe id="t1" name="t1" src="t2.htm"></iframe>
 其中,t1.htm主要为某个功能的操作按钮,通过某些操作生成结果在t1 iframe中
 显示。
  t2.htm中是高度很大的页面,不含其他的框架。

我想要在t1 iframe文挡内容发生变化的时候。能够动态改变t1.htm页面的高度。
同时也要刷新main.htm的main iframe的高度,使得所有的高度进行匹配。


网络上提供的解决方法,都是针对某个iframe 调整的,并不能满足我的需求。
自己摸索了一段时间,才得到解决,虽然解决方法任便不够优美,但可以拿出来。
大家一快学习。其实,原理都不难,难的是Javascript标准的支持不一致,而且调试
很不方便造成的。期间有一本书<<Javascript bible>>(<javascript圣经>),其中的
某些章节对我帮助很大,希望你也可以得到很多收获。

我的解决方法:
在t2.htm中(最好在<head></head>标签内)加入:
<script type="text/javascript">
 function window.onload(){
  //parent.document.getElementById("t1").height=document.body.scrollHeight;
  //没有style也可以
 parent.document.getElementById("t1").style.height=document.body.scrollHeight;
 parent.document.getElementById("t1").style.width=document.body.scrollWidth;
 
 parent.parent.document.getElementById("main").style.height=parent.document.body.scrollHeight;
 parent.parent.document.getElementById("main").style.width=parent.document.body.scrollWidth;
}

在t1.htm中(最好在<head></head>标签内)加入:
<script type="text/javascript">
 function window.onload(){
 
  //parent.document.getElementById("main").height=document.body.scrollHeight;
  //没有style也可以
 parent.document.getElementById("main").style.height=document.body.scrollHeight;
 parent.document.getElementById("main").style.width=document.body.scrollWidth;
}
</script>

这样在t2.htm被载入的时候,动态调整t1 iframe及 main iframe的高度。
 在t1.htm被载入的时候,动态调整main iframe的高度。
从而实现了上述得到功能。(在IE6.0中测试)

不过在使用的时候,有些方法则不行的,比如网络解决方法中的第4个,
会报错。不知道属于什么原因。

其中getElementById()是javascript标准方法。而document.all.属于微软自己的用法。

只要原理知道了。做好任何一件事情剩下的就是时间和实践。


七 总结。

回过头来。总结以下。
1。javascript标准的支持,在各个浏览器平台是存在很多差异的。
如果有个标准就好了。不过及时现在w3c存在一定的标准,但很多情况下。
各厂商都在各行其是,自己做自己的。导致了很多javascript代码的兼容
很难处理,或者就要判断各个浏览器的版本,最后简单的功能都被复杂化了。

2。javascript属于弱类型语言,不易于调试,至少在win下是难调试的。

3。只要原理正确,清楚。解决问题是迟早的事情。除非你发现你理解错了。
或者违反了一定的标准。问题终会得到解决。

[1]  [2]  [3]