iframe 解析

简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/11265153的情况下,将对iframe的常用用法进行总结。

1、iframe能解决的问题

(1)、通过iframe能实现跨域

(2)、使用iframe能解决IE6下select遮挡不住的问题

(3)、通过iframe能解决Ajax前进后退的问题

(4)、通过iframe实现异步上传(Easyui的form组件就是通过iframe,实现表单提交时,可以提交上传域)

2、iframe 概要及注意事项

iframe会创建包含另一个文档框架的内联框架(即行内框架)

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。 提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。 <iframe width=420 height=330 frameborder=0 scrolling=auto src="URL"></iframe>

3、iframe的基本属性

4、iframe访问方式

(1)、iframe访问方式大致有两种,大致如下:

i、contentWindow属性,通过iframe元素的这个属性,可获取子窗口的window对象,该属性兼容各个浏览器

ii、contentDocument属性,通过iframe元素的这个属性,可取得子窗口的document对象,该属性兼容向存在问题:Firefox 支持,大于ie8版本的ie支持.

(2)、获取子窗口document对象,代码如下:

function getIframeDoc(){
    var iobj=document.createElement("iframe");
     document.getElementsByTagName("body"[0].appendChild(iobj);
     return iobj.contentDocument||iobj.contentWindow.document;
}

(3)、通过jQuery对子页面进行操作

i、先通过jQuery获取iframe,再把jQuery对象转换成dom对象,可以通过get()方法进行转换.代码如下:

$("#myiframe")[0].contentWindow

ii、在得到iframe的window对象后,接着可以通过jquery选择器对其进行页面操作,代码如下:

通过上面的方法可以