`
truemylife
  • 浏览: 230649 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

杂记从iframe自适应高度实现及引出的几个ie问题的特殊处理

阅读更多

因为这是项目之后写的博客,因此这里只描述性的点出问题及解决的办法。

1、为了实现iframe动态加载页面并自适应高度,且兼容ie、FF、Chrome浏览器。以下为代码片段(引入Jquery):

 

 

 

$jq("#frametd").html('<iframe name="MainContent" id="MainContent'+i+'" allowtransparency=true style="width:100%;"  scrolling="'+($.browser.msie?"yes":"no")+'" frameborder="0" '+($.browser.msie?"onresize=\"resize("+i+")\"":"")+'>浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。 </iframe>');
	$jq("#MainContent"+i).attr("src",uri);
	var iframe = $jq("#MainContent"+i)[0];
	if (iframe.attachEvent){ // 解决ie不认iframe onload问题
	     iframe.attachEvent("onload", function(){
	    	 iframe.height=iframe.contentWindow.document.body.scrollHeight;
		     });  
	 } else {  
	     iframe.onload = function(){ 
    		 iframe.height=iframe.contentWindow.document.documentElement.scrollHeight;
	     };  
	 }

/** 如果页面上还有ajax动态加载的component,ie还是不能拿到正确的height,只能在resize之后,再次去获取高度,此时拿到的height才是正确的 **/
function resize(i){
	 setTimeout("fixactualheight("+i+")",1);
}

function fixactualheight(i){
	try{
	var actualheight = $jq("#MainContent"+i).contents().find("body").height()+40;
	
	$jq("#MainContent"+i)[0].height=actualheight;
	}catch(e){
		setTimeout("fixactualheight("+i+")",10);
	}
}
 

 

 

以上代码,基本上都是为兼容ie浏览器编写的,因为其他浏览器实际上只需要一句代码onload时 iframe.height=iframe.contentWindow.document.documentElement.scrollHeight;就能实现高度自适应。
为什么ie里的实现会变的这么复杂呢?这跟动态加载的uri页面复杂度有关,如果iframe src加载的页面内容简单,页面本身没有动态异步加载,那就简单了,只要这句代码iframe.height=iframe.contentWindow.document.body.scrollHeight;就能实现高度自适应。但如果加载的页面本身又是通过比较复杂的js输出页面内容,这时候用以上这句代码获取的高度就会不正确。必须等到加载对像页面全部加载完毕后,才能获取到正确的高度。那如何捕获这个事件呢,直接用onresize还是不行,必须等到resize事件之后才能捕获,因此我这里的实现是在onresize事件里,再加上setTimeout(function(){},1)来捕获。

2、iframe的scrolling,在ie里能初始化,再次修改属性不起作用

一般情况下,如果iframe插入的页面很简单,没有弹出层,那自适应高度时,把scrolling初始化成no就行。但是如果iframe插入的页面又有弹出层,而且这个弹出层的高度可能超出页面自身高度,这时候如果不出现滚动条就不合理了。

这时就要把scrolling初始化成yes。但把scrolling置成yes后,在ie下某些iframe加载的页面,会出现一条disable后的滚动条,找不到原因,因为某些页面又没有,似乎跟插入的页面也有关系,我把获取到的高度iframe.contentWindow.document.body.scrollHeight再加上一定的高度,比如再加上500,这个disable后的滚动条就会消失,可能ie对是否出现滚条的内部判断机制有点问题。暂时无解,只能容忍让其出现这个假的滚动条。本人在实现的过程中,试图动态的修改scrolling属性,发现iframe的scrolling属性在ie下不能被动态设置,脚本不报错,但不起作用。

 

3、在实现过程中,间接引出ie的问题1,某些ie版本会自动给你的元素加style属性

$jq(obj).removeClass().addClass("newclass");

这是一个很简单的,为某个元素切换样式的代码,但在ie下发现怎么也不起作用,debug时才发现神奇的ie自行给当前元素加上了一段style。那就毫不客气的把style也一并删除,

$jq(obj).removeAttr("style").removeClass().addClass("newclass");

 

4、在实现过程中,间接引出ie(仅限ie6)的问题2,给select的option元素置selected属性不起作用。

看起来跟第2点有点相似的原因,解决的办法也是setTimeout,代码如下

 

 

 

if($jq.browser.msie && $jq.browser.version == "6.0"){
				/** ie6的一个bug,不能直接置selected值 **/
				setTimeout(function() { 
					$jq(youroption).attr("selected",true);
				}, 1);
                                setTimeout(function(){//你的后续业务},1);//这里一定要置1或比1大,不然获取的select值不对,因为前一步设置动作还没完成。
		}else{
 
			$jq(youroption).attr("selected",true);
                        //你的后续业务
		}

 

另外,如果iframe加载时存在跨域相关问题,参考之前的博文

 

 

分享到:
评论
1 楼 liuweihug 2014-04-10  
推荐个文章,解决iframe自适应高度并决jquery ajax获取数据后高度自适应问题 
http://www.suchso.com/projecteactual/jquery-ajax-iframe-resetiframeheight.html

相关推荐

    李特伍德 一个数学家的杂记.pdf

    李特伍德的《一个数学家的杂记》是一本收录了作者关于数学、教育以及个人观点文章的集合。这本杂记以数学为主题,涉及的内容包括几何、概率论、数论以及历史上的数学发现等。李特伍德在书中讨论了数学知识与日常生活...

    oracle杂记.doc

    oracle杂记.doc 这是我个人的总结。 主要是oracle的编程以及体系结构的理解。

    oracle 9i杂记

    《Oracle 9i杂记——探索PLSQL的世界》 Oracle 9i,作为Oracle数据库的一个重要版本,引入了许多新特性和改进,其中PL/SQL(Procedural Language/Structured Query Language)是其核心组成部分,是一种结合了SQL和...

    杂记:一家大鱼及其他

    总结来说,杂记中所涉及的内容实际上是对中国农村生活场景的细致观察,不仅涵盖了烹饪技艺、家庭装饰、生活细节、自然探索以及教育情感交流,还提出了社会生活中的某些敏感问题。通过这些生动的描述和细节的展开,...

    计算机杂记

    - **.pdb 文件**:在调试过程中,.pdb 文件用于存储符号表和其他调试信息,帮助开发者定位和解决代码中的问题。 - **特点**: - 支持断点设置:允许开发者在特定的行设置断点进行调试。 - 代码跟踪:可以帮助...

    java加密算法及常用知识学习杂记

    同时,了解加密过程中的常见问题,如密钥管理、填充模式、混淆和扩散等,这些都是提高安全性的关键点。 总结来说,Java加密算法的学习涵盖了理论与实践,包括理解各种加密机制、掌握Java加密库的使用、处理异构数据...

    51 单片机C 语言学习杂记

    这份学习资料可能涵盖了以下几个方面: 1. **基础知识**:首先,会介绍单片机的基本概念,包括CPU、存储器、I/O端口等硬件组成部分,以及它们的功能和工作原理。C语言的基础语法,如变量、数据类型、运算符、控制...

    SpringMVC杂记(三) 向导型Controller的实现(基于SpringMVC 3.1.1)

    在本篇博文中,我们将深入探讨SpringMVC框架中的向导型Controller的实现,这是SpringMVC 3.1.1版本的一个重要特性。向导型Controller通常用于处理多步骤的用户交互流程,如购物车结账、用户注册等,它能够引导用户...

    51单片机C语言学习杂记

    总之,“51单片机C语言学习杂记”是一个全面的教程,涵盖了51单片机的基础知识和C语言编程技巧,对于想要入门单片机开发的读者来说,是一个不可多得的学习资源。通过深入学习和实践,读者将能够熟练掌握51单片机的...

    第14章 Pythonic与Python杂记.mp4

    第14章 Pythonic与Python杂记.mp4

    InstallshieldX安装制作杂记

    《InstallshieldX安装制作杂记——自定义对话框的实现》 在软件开发过程中,安装程序的制作是一项不可或缺的工作。InstallshieldX作为一款强大的安装包制作工具,提供了丰富的功能,其中包括自定义对话框的创建,这...

    stm8s003f3使用杂记

    在程序下载过程中,可能会遇到无法写入程序的问题,需要从以下几个方面进行考虑:首先,要确认实际电路连接是否正确,包括电源、地线以及芯片引脚与下载器接口的连接是否正确无误。其次,检查使用的STLink下载线是否...

    PD杂记体育ii已同居ikyht

    数据库设计是IT领域中至关重要的部分,它涉及概念设计、逻辑设计和物理设计等多个阶段。在概念设计阶段,我们主要关注实体、属性和联系集,这些都是构建数据库模型的基础元素。实体代表现实世界中的对象或事件,属性...

    InstallshieldX安装制作杂记.rar

    总的来说,InstallshieldX安装制作杂记这份资料涵盖了从基础到进阶的多个层面,无论是初学者还是经验丰富的开发者,都能从中获益,提升安装包制作的专业水平。通过深入学习和实践,你将能够制作出更加稳定、用户友好...

    ddddocr杂记,使用ddddocr、flask

    在本项目中,"ddddocr杂记,使用ddddocr、flask" 主要涉及的是一个基于Python的OCR(Optical Character Recognition,光学字符识别)应用,利用ddddocr库进行文字识别,并结合Flask框架构建了一个后端服务。...

    Hadoop大数据平台运维杂记.pptx

    Hadoop大数据平台运维杂记是关于Hadoop大数据平台的运维经验总结,主要涵盖了Hadoop集群的使用情况、安装升级、Cloudera Manager、Hadoop的发展历程、常见事故处理等方面的内容。 一、Hadoop集群使用情况 Hadoop...

    SpringMVC杂记(五) JSR303数据验证

    在本篇《SpringMVC杂记(五) JSR303数据验证》中,我们将深入探讨SpringMVC框架如何集成并使用JSR303(JavaBeans Validation)来进行数据验证,这是一种强大的验证机制,可以确保应用程序接收到的数据是合法且符合...

    \51单片机C语言学习杂记.

    3. **51单片机C语言特性**:C语言在51单片机上的实现有一些特殊之处,比如位操作、中断服务函数、IO端口操作等。要理解如何在C语言中直接操作硬件资源。 4. **中断系统**:理解中断的概念,学习如何在C语言中设置...

    installshield安装制作杂记

    installshield安装制作杂记 installshield x

Global site tag (gtag.js) - Google Analytics