- 浏览: 559418 次
- 性别:
- 来自: 北京
最新评论
-
anqinghaozi:
请问 你这weblogic jms 如何部署到tomcat上去 ...
Spring+weblogic接收JMS消息 -
cjliang:
1456746014@qq.com 我也要
jqGrid学习 ----------------- 第一个实例 -
Moy_Yeung:
Moy_Yeung 写道 您好 我最近在学习使用这个插件 能麻 ...
jqGrid学习 ----------------- 第一个实例 -
Moy_Yeung:
您好 我最近在学习使用这个插件 能麻烦博主发份demo吗 谢 ...
jqGrid学习 ----------------- 第一个实例 -
十叶木竹:
最近在自学这个插件,麻烦博主,发一份源码,以供学习,谢谢博主啦 ...
jqGrid学习 ----------------- 第一个实例
顺便在网上找了一些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。需要更多的耐心去面对难题。去静下心来看看问题到底出在哪里。
有一句话:“任何难题,一定有某个解决方法,问题是你有没有发现”。
努力发现。努力前进。
评论
“需要更多的耐心去面对难题。去静下心来看看问题到底出在哪里”
说的不错!
发表评论
-
python学习摘要
2011-04-18 15:27 1375学习一门脚本语言是很 ... -
tmux快捷键
2011-04-16 07:39 1534摘要 http://rainbird.blog.51cto.c ... -
eclipse subclipse javahl 库加载错误
2011-04-13 17:31 2364网上搜集 http://islandlinux.org/how ... -
使用Msmtp mutt shell发邮件 (转)
2010-11-26 09:32 2805原文地址:http://fdsazi.blog.51cto.c ... -
Ubuntu10.0.4 Maven环境变量设置
2010-08-15 14:02 34491. 下载并解压缩apache-maven-2.2.1-bin ... -
Ubuntu10.0.4 Java环境变量设置
2010-08-15 14:00 4040Ubuntu10.0.4 下手工安装jdk及其环境变量设置 ... -
Managing Hierarchical Data in MySQL(转)
2010-07-09 10:01 1158http://dev.mysql.com/tech-resou ... -
JS的encode跟decode
2010-05-21 16:03 10603网上看到的,感觉能用得到,收藏下吧 /** * * URL ... -
Apache ActiveMQ
2009-12-25 15:46 3405一、特点 支持各种语言和协议的客户端。如:Java、C、C++ ... -
mysql数据的备份恢复命令
2009-12-14 15:37 1279记录下命令,害怕忘记! 导出整个数据库命令: D:\mys ... -
Struts2.18 的 interceptor
2009-12-08 08:20 3005首先定义我们自己的Interceptor package ... -
修改非安装版本mysql字符集
2009-12-08 08:08 1903如果我们的msyql是免安装版本,在windows系统下,my ... -
jqGrid学习 --------------自定义搜索
2009-12-06 15:45 15293定义自己的查询 <div id="myse ... -
jqGrid学习 -------------- 搜索工具栏
2009-12-06 15:13 13059搜索工具栏只是在列标题下面构造一个输入框。且使用表格的url进 ... -
jqGrid学习 -------------- 搜索
2009-12-06 13:32 9399表格中所有的列都可以作为搜索条件。 所用到的语言包文件 $ ... -
jqGrid学习 -------------- 自定义格式化类型
2009-12-06 13:04 8645<script> jQuery(" ... -
jqGrid学习 -------------- 格式化
2009-12-06 11:29 12452jqGrid的格式化是定义在 ... -
jqGrid学习 -------------- 自定义按钮
2009-12-06 11:14 16051用法: <script> ... jQue ... -
jqGrid学习 -------------- 翻页(2)
2009-12-06 10:32 8023jqGrid的翻页导航是一个方法,你可以事先定义一些其他操作, ... -
jqGrid学习 -------------- 翻页
2009-12-05 21:45 5344jqGrid的翻页要定义在html里,通常是在grid的下面, ...
相关推荐
多层嵌套iframe 自适应高度的解决方法
有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应 A页面 复制代码代码如下: <body> <iframe id=”main” name=”main” width=”980″ scrolling=”no” ...
swift ,使用autolayout + storyboard 最外层tableview列表,cell里面嵌套了tableview,自适应内容,cell里的tableview不可滑动,内容全部显示,且文字分行显示,不用设置cell的高度直接可以自适应内容
练习说明:使用postMessage可以在iFrame、父子窗口、跨页面等,之间相互传递消息。 你好,我是TKCB-GO,一个有着游戏策划梦想,却沦为程序员的游戏家,这是我的技术博客:www.tkcb.cc 技术博客网站里面,除了我的...
多层嵌套循环 参数转换 数据库配置报文父子级结构 java实现
Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual C++源代码 24 如何设计多层嵌套异常捕获错误Visual ...
javascript 多层嵌套的一个层展开、收缩实例! javascript 多层嵌套的一个层展开、收缩实例!
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有...元素多层嵌套,JS获取问题</title> </head> <body> <span>span <span>span <span>1 <spa
问题描述 当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否...如果为否,我们就会嵌套一个iframe标签来打开一个相应的
Fragment和Viewpager多层嵌套,非常好用的fragment框架布局,很好的实现了各种事件冲突,作为项目非常好用,本人亲测可以直接运行
1、ItemControl使用和MVVM绑定 2、Prism框架使用 3、ItemControl样式修改 4、绑定中的多层嵌套实现
自适应神经网络库(Matlab 5.3.1 及更高版本)是一组块,可实现多个具有不同自适应算法的自适应神经网络。 它主要由 Giampiero Campa(西弗吉尼亚大学)和 Mario Luca Fravolini(佩鲁贾大学)于 2001 年 6 月至 7 ...
解析Json字符串直接转换为对象(包括多层List集合 嵌套)所用jar包
如何设计多层嵌套异常捕获错误实例C#.net源代码编写
千万别下载,csdn私自修改我设置的积分(还不能改回来),去https://github.com/czyt1988/czyBlog/tree/master/tech/QDockWidget_VSStudioMode,下载源码。具体可见:...
net.sf.json.JSONObject ==> Java对象
两层嵌套的checkbox记录选中状态,listview嵌套Gridview,Gridview嵌套Checkbox
实现DataGrid多层嵌套.doc
FragmentDome,完整的Dome,其包扩fragment的多层嵌套,并且使用viewpager嵌套多层fragment,并且实现活动和点击的完美效果,另外还添加滑动时的动画效果