html iframe使用的实战总结分享

说在前面的话，iframe是可以做很多事情的。
例如：
a>通过iframe实现跨域;
b>使用iframe解决ie6下select遮挡不住的问题
c>通过iframe解决ajax的前进后退问题
d>通过iframe实现异步上传。(easyui中form组件就是用的iframe，实现表单提交时，可以提交上传域)
下面就一些问题一一论述。

1、iframe基本知识：

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示：您可以把需要的文本放置在 之间，这样就可以应对无法理解 iframe 的浏览器。

可选属性：

标准属性：

立即学习“前端免费学习笔记（深入）”；

2、操作iframe：

   注：测试环境IE：8.0，FF：23.0.1
   a>隐藏iframe表框
		i>标签中设置：frameborder="0",
		ii>DOM操作：
			
			
			
			
   b>动态创建iframe
   
   c>获取iframe
		i>var obj = document.getElementById("iframeID");
		  获取iframe对象，可直接操作iframe标签属性,如只想改变iframe的 src 或者 border ，scrolling 等attributes
		ii>var dom = frames["iframeName"];
		   获取iframe的DOM对象，此对象可用来操作对象，比如想操作iframe页面中的元素。
    d>获取iframe中的window对象
		function getIframeWindow(obj) {
			//IE || w3c
			return obj.contentWindow || obj.contentDocument.parentWindow;
			//parentWindow 是 parent window object
		}
		document.getElementById取到的iframe是不能直接操作里面的document的，只能这样取：
		IE:frames[id].document或obj.contentWindow.document;
		FF:dom.contentDocument或obj.contentDocument;不绑定任何事件.
	e>获取iframe页面高度
		function getIframeHeight(obj){
			var idoc = getIframeWindow(obj).document; 
			if(idoc.body){
				return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
			}else if(idoc.documentElement){
				return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
			}
		}
	f>父子页面互访
		i>子访问父：
			parent.html:
			
				
等到的信息：

				
			
			son.html:
			
			
			
			
		ii>父访问子：
			parent.html:
			
			
等到的信息：

			

			
			
			
			son.html:
			
			
Hello world!!!
			

3.iframe高度自适应和跨域：

实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便
	a>同域下的高度自适应
	parent.html:
	
	
	 
	
	另：document.documentElement与document.body相关说明(W3C DOM2.0规范)
	document.doucmentElement:
		documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the 
		child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".
	document.body:
		document.body is the element that contains the content for the document. In documents with  contents, returns the  element, 
		and in frameset documents, this returns the outermost  element.
		Though body is settable, setting a new body on a document will effectively remove all the current children of the existing  element.
	IE在怪异模型（Quicks Mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clientHeight=0。
	获取scrollTop:
	var sTop=Math.max(
		(document.body?document.body.scrollTop:0),
		(document.documentElement?document.documentElement.scrollTop:0),
		(window.pageYOffset?window.pageYOffset:0)
	);    

	b>跨域下高度自适应
	页面：
	index.html:(http://www.csdn.net)
	
	son.html:
	
	
	
	
	agent.html:(http://www.csdn.net)
	

4.iframe背景透明：

在ie6/7/8下引入iframe的时候，它的背景默认是白色，即使设置了style=”background-color:transparent;”也无效，
但是其他浏览器(firefox,chrome,opera,ie9)都正常显示，要解决这个兼容性问题，必须用到一个属性。
下面来看看现象：

index.html:

结果如下图：(FF中有滚动条是因为在index.html中设置了有滚动条)

Delphi 实例精选全掌握 CHM

来自万一的DELPHI编程博客，精品经验和实战的结晶，感谢万一的无私奉献，相信对DELPHI编程的朋友绝对有用处。CHM内的大部分源码在D7下全部编译通过，而且很少使用第三方控件，是学习的精品。 注：如果电子书不能正常显示，需要点击电子书“属性”->“解除锁定”就可以了。

下载

解决：
给iframe设置属性：allowTransparency=”true” //设置为true允许透明

备注：iframe不设置此属性时，可使用iframe解决在IE6、7环境中遮住select

5.判断页面中是否有iframe:

	a>首先来看看window.frameElement这个属性。
		返回嵌入当前window对象的元素(比如 
		
		son.html:(注意frameElement用在son.html中，如果用在parent.html中,则返回null)
		
		
Hello world!!!
		
		
		备注：虽然该属性名为frameElement,但该属性也会返回其他类型比如