`
a3mao
  • 浏览: 563459 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多层嵌套Iframe的自适应问题解决-网上摘录

    博客分类：
  • Work
JavaScript浏览器IEASP框架 
阅读更多
最近项目中遇到一个令人头疼的问题,在一个jsp页面中包含一个iframe,iframe是要动态更新的一些数据,问题就是在iframe上,在某些情况下,(具体啥情况我也不得而知,反正是会出问题,而且是莫明其妙的.)iframe包含的数据不会刷新,老是保留上次的结果,折腾了好几天都没结果,后来同事说是要把iframe里src的引号去掉,试了试,果然奏效,郁闷... 难道就是因为这个src的引号吗?

顺便在网上找了一些iframe的资料:网址:http://hustxiang.bokee.com/viewdiary.11149711.html

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

一.为什么需要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的ID
var 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) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[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)
else
window.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。只要原理正确，清楚。解决问题是迟早的事情。除非你发现你理解错了。
或者违反了一定的标准。问题终会得到解决。

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

分享到：
| DES/3DES加密算法源代码-转载
评论
3 楼 哥的传说 2011-01-04  
好文章啊 你的问题就是我遇到的问题 找好久啦
2 楼 chunbin1985 2009-01-19  
不过你方法在Firefox里不好使啊
1 楼 ljm3256748 2008-06-12  
这好的文章怎么没有评论呢
“需要更多的耐心去面对难题。去静下心来看看问题到底出在哪里”
说的不错！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    多层嵌套iframe 自适应高度的解决方法

    多层嵌套iframe 自适应高度的解决方法

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    总结，通过上述方案，我们可以实现`iframe`的多层嵌套并保持高度自适应，从而提供良好的用户体验，避免了由于内容溢出导致的滚动条问题。在实际项目中，根据实际需求对代码进行调整，可以解决复杂的`iframe`布局问题...

    iOS tableview里面嵌套tableview，自适应高度

    swift ，使用autolayout + storyboard 最外层tableview列表，cell里面嵌套了tableview，自适应内容，cell里的tableview不可滑动，内容全部显示，且文字分行显示，不用设置cell的高度直接可以自适应内容

    嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip

    练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...

    java实现多层嵌套循环参数转换

    在Java编程中，多层嵌套循环是一种常见的数据处理方式，尤其在处理具有层次关系的数据时，例如构建或解析父子级结构。在这种场景下，我们可能需要遍历多个层级的数据，以便进行转换、操作或者存储到数据库中。下面将...

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多，在js中获取还是比较麻烦的，我写了几套方案，大家可以参考参考，如果你有...元素多层嵌套，JS获取问题&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span &lt;span&gt;span &lt;span&gt;1 &lt;spa

    javascript 多层嵌套的一个层展开、收缩实例

    在JavaScript编程中，多层嵌套的展开与收缩是一个常见的需求，特别是在构建可交互的用户界面，如树形结构、折叠菜单或者层级数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，以及相关的技术要点。 首先...

    Visual C++源代码 24 如何设计多层嵌套异常捕获错误

    Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual ...

    Fragment和Viewpager多层嵌套

    本项目聚焦于"Fragment和ViewPager的多层嵌套"，这是一个高效且灵活的布局策略，可以创建丰富的交互体验。以下是对这个知识点的详细解释。 **Fragment** 是Android SDK中的一个组件，它代表了应用程序界面的一部分...

    ItemControl实现列表和多层嵌套(Prism Mvvm)

    本主题将深入探讨如何使用`ItemControl`结合Prism MVVM框架来实现列表展示及多层嵌套的数据绑定。以下是关于这些知识点的详细解释： 1. **ItemControl使用和MVVM绑定**： `ItemControl`是WPF（Windows ...

    Android使用Kotlin利用Gson解析多层嵌套Json数据

    Android使用Kotlin利用Gson解析多层嵌套Json数据

    关于解决iframe标签嵌套问题的解决方法

    问题描述 当我们使用easyui做后台管理系统的时候，会使用tree组件来实现树形菜单，而我们每点击一次相应菜单，会根据是否有url来判断是否是一级菜单，以及是否...如果为否，我们就会嵌套一个iframe标签来打开一个相应的

    ANN:自适应神经网络-matlab开发

    自适应神经网络库（Matlab 5.3.1 及更高版本）是一组块，可实现多个具有不同自适应算法的自适应神经网络。 它主要由 Giampiero Campa（西弗吉尼亚大学）和 Mario Luca Fravolini（佩鲁贾大学）于 2001 年 6 月至 7 ...

    AngularJS使用ui-route实现多层嵌套路由的示例

    5. 状态嵌套：多层嵌套路由的实现依赖于ui-router的状态嵌套能力。在配置状态时，可以通过嵌套子状态来实现复杂的视图层次结构。在给定的示例中，对peopleState状态进行了进一步的细分，定义了多个子状态来分别处理...

    如何设计多层嵌套异常捕获错误实例C#.net源代码编写

    在C#.NET编程中，异常...通过精心设计的异常处理，开发者可以确保程序即使在遇到错误时也能保持运行，同时提供有用的反馈，帮助调试和解决问题。通过学习和应用这些技术，你可以提升C#.NET应用程序的稳定性和可靠性。

    解析Json字符串直接转换为对象(包括多层List集合 嵌套)所用jar包

    标题和描述提及的是将JSON字符串转换为Java对象，特别是涉及多层嵌套和List集合的情况。这在处理复杂数据结构时非常常见，比如服务器返回的响应可能包含嵌套的对象和数组。下面我们将详细介绍如何使用Jackson库来...

    多层集合嵌套的JSON数据转化为Java对象（src.zip）

    通过以上步骤，我们可以高效地将多层集合嵌套的JSON数据转换为Java对象，方便在Java程序中进行处理和操作。这种方法在实际开发中非常常见，特别是在处理来自Web服务、API接口或其他系统的JSON数据时。熟练掌握JSON...

    mybatis 多层级collection嵌套.docx

    在MyBatis中，处理多层级集合嵌套是常见的需求，特别是在映射复杂的数据结构时。这个场景通常出现在一个实体对象包含多个子对象，而这些子对象又可能有自己的子对象，形成一种树状或者网状的数据关系。在提供的文档...

    两层嵌套的checkbox记录选中状态

    在IT领域，尤其是在Android开发中，经常需要处理用户交互，比如多层嵌套的复选框（checkbox）的选中状态管理。这个场景通常出现在数据结构复杂，需要展示层次关系的时候，例如在ListView中嵌套一个Gridview，而...

Magicbox
Global site tag (gtag.js) - Google Analytics