多层嵌套Iframe的自适应问题解决

    技术2022-05-11  106

    一.为什么需要Iframe?由于Iframe相当于独立的窗体,因此可以动态改变Iframe中的稳当的内容,而没有必要改变其他的元素。正是因为这个特点,所以Iframe在某方面就显示了它的优越性。对于我的情况,主要是为了减少重复载入网页中已经存在的标题,导航蓝等元素;另外可以实现导航功能。

    二.如何在网页中动态嵌入其他网页代码?如上所述,通过IFrame可以实现动态的改变页面中某部分内容,而无须刷新整个页面,那有没有其他方式可以实现动态的改变网页的内容,而无须刷新整个页面方法呢?通过在网络上搜索,学习。发现了一些其他方法:1.AJAX,(Asynchronous JavaScript And XML)。总体来说,它是各种技术的综合。通过XMLHttpRequest动态的请求服务器的页面数据,然后在客户浏览器端,改变网页中某些元素的内容,但无须重新下载整个页面,正是因为这个特性,所以AJAX被很多地方应用。也得到了很大发展,但使用AJAX的前提是要编写很多脚本文件。相对使用IFrame来说,稍微复杂一点。不过很多书已经给了很多参考。<<AJAX In Action>>等都可以作为学习使用。

    2.通过使用页面对象<object type="text/html" data="test.htm">.可以实现内嵌页面元素,但由于不能(或许是我没有找到)高度的动态扩展,因此显示起来,不是我想要的效果。因此没有采用。

    三.使用Iframe的限制。并不是所有的浏览器都支持Iframe元素的。目前主要的浏览器包括IE、Firefox、Opera等。其余很多浏览器主要是基于IE,Netscape,等内核。但Iframe只在IE,Opera浏览器中被支持。所以如果必须使用,则必须保证所使用的浏览器基于IE,Opera等内核。关于浏览器平台介绍,请参考下面的文章。http://www.alls.cn/data/2005/1221/article_3747.html

    四.网上存在的Iframe自扩展解决方案.

    Iframe自适应页面的解决方案:目前只要你在Google中搜索"Iframe自适应",就可以得到很多有关Iframe自适应的解决方法,总共可分以下下几种:—————————————————————————————————1.采用MicroSoft扩展的javascript的实现:<<<<<<<<<<<<<<<<<<<<<<<<<<原文:代码如下:

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>New Page 1</title></head>

    <body><IFRAME id="test" name="test" frameBorder=0 scrolling=no src="http://10.107.2.199:2500/cn/asp/reg.asp" width="100%" height=0></IFRAME></body>

    </html><SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">

    document.all("test").height=test.document.body.scrollHeight;

    </SCRIPT>

    重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”

    之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下,超简单哦

    1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)

    parent.document.all("框架ID名").style.height=document.body.scrollHeight;parent.document.all("框架ID名").style.width=document.body.scrollWidth;

    这里的 框架ID名 就是Iframe的ID,比如:<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>

    2、给你网站里所有的被包含文件里面每个都加入<script language = "JavaScript" src = "bottom.js"/></script>

    3、OK,收工!我在WINXP、IE6下面测试通过。很简单吧!<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文结束2.采用检测浏览器版本,加载事件监听器,实现页面载入后,动态扩展。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<原文Iframe自适应高度

    <script language="JavaScript"> //** iframe自动适应页面 **//

    //输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

    //定义iframe的IDvar iframeids=["content"]

    //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏var iframehide="yes"

    function dyniframesize() {var dyniframe=new Array()for (i=0; i<iframeids.length; i++){         if (document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);if (dyniframe[i] && !window.opera){dyniframe[i].style.display="block"if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScapedyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IEdyniframe[i].height = dyniframe[i].Document.body.scrollHeight;}}//根据设定的参数来处理不支持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)elsewindow.οnlοad=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.scrollHeightif(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。只要原理正确,清楚。解决问题是迟早的事情。除非你发现你理解错了。或者违反了一定的标准。问题终会得到解决。

    4。需要更多的耐心去面对难题。去静下心来看看问题到底出在哪里。有一句话:“任何难题,一定有某个解决方法,问题是你有没有发现”。努力发现。努力前进。

     

    最新回复(0)