深刻理解iframe

http://www.cnblogs.com/fangjins/archive/2012/08/19/2645631.html

一 目的

　　iframe是网页布局中重要的元素，是解决一些常见前端问题的必修课，而iframe老是让人捉摸不透，很差掌握。关于iframe，有不少问题咱们必需要完全弄清。笔者累一年经验，3天构思，欲阐述关于iframe的那些事。虽然都是常见的知识，可是不多有人能深刻理解，灵活使用。

　　iframe在布局，无刷新方面都有极其中重要，不可替代的地位。虽然如今流行DIV布局，可是有时还得用iframe布局；虽然2005年流行使用AJAX进行无刷新，可是在特效状况下还得使用iframe；在flash动画内嵌html时，iframe更是必不可少。本文的主要目的就是针对这些问题展开讨论，而且总结。本文目的有：

　　1.iframe的基础，深刻理解frame是何物，属性该如何设置。

　　2.iframe自适应高宽，即ifrmae在布局方面的应用。

　　3.iframe的表单无刷新，iframe在上传文件时的无刷新做用。

　　4.iframe的跨越问题。

　　5.iframe与jQuery。

　　请不要怀疑iframe的缺点，不要担忧iframe的使用量。各大网站都在使用，淘宝，百度，新浪，博客园，都能找到iframe的踪影。

二 什么是iframe

　　iframe即内联框架。不一样于frame，frame与frameset综合使用，成为帧，框架集。frame已经不大使用了，说白了，frame是僵硬的叠加，iframe是内联的，不是简单的叠加，而是承前启后，对于外围的页面，iframe是一个普通的元素，对于iframe里面的内容，又是一个五脏俱全的页面。iframe的写法是：

　　<iframe id="coreIframe" name="coreIframe" src="/blank.html"></iframe>

能够看出，iframe毫无神秘可言，就是一个普通的元素，与span,div同样。那么，iframe是内联元素仍是块元素？第一，iframe能够设置width,height而且有效。第二，iframe像普通文本同样不会换行。看图：

 

　　由此两点，能够断定：

　　iframe是inline-block元素。

　　iframe的基本属性与其余元素同样，有样式的，也有特有的。其中，关于样式的彻底可使用css设置。有些属性不建议使用，也没有必要使用，下面列出iframe的经常使用属性：

　　1.frameborder:是否显示边框，yes,no。

　　2.height:框架做为一个普通元素的高度，建议在使用css设置。

　　3.width:框架做为一个普通元素的宽度，建议使用css设置。

　　4.name:框架的名称，window.frame[name]时专用的属性。

　　5.scrolling:框架的是否滚动。yes,no,auto。

　　6.src：内框架的地址，可使页面地址，也能够是图片的地址。

比较特别的iframe属性只用三个：frameborder,scrolling,src，全部的iframe几乎都要指定。典型的iframe元素通常是：

　　<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

　　<iframe id="mainIframe" name="mainIframe" src="blank.html" frameborder="0" scrolling="auto" ></iframe>

而且使用css设置其样式：

　　#mainIframe{

　　　　width:1000px;

　　　　height:800px;

　　　　border:1px blue solid;

　　　　margin-left:10px;

　　}

　　上面都是将iframe做为一个普通元素看待，看的出来，iframe就是一个普通的元素。

三 iframe自适应高度

　　iframe的自适应高宽是个不小的难题。所谓的iframe高度自适应，通常就是要嵌入的iframe符合如下要求：

　　1.内嵌的iframe，要适应父页面，当须要滚动条，滚动条显示，不须要时，滚动条不显示。

　　2.当父页面窗口发生变化时，iframe也会变化。

　　3.当iframe的内容变化时，其滚动条也要适应。

　　首先，不要盲目的去关注这个命题，而应该理解，哪些东西影响了iframe的高宽，iframe在页面中如何表现。若是对页面的高度，宽度不不够了解，常常糊涂，请看笔者的另两篇文章，页面的高度发微，页面的宽度发微。要是作到高宽自适应，无非是在父页面的窗口大小，文档大小，iframe元素的高宽，子页面的窗口大小，文档大小，等方面下功夫。首先，父页面是咱们编写的，窗口大小由用户即浏览器决定，文档大小由页面内容决定，而子页面的文档大小，咱们也许不能决定，若是是跨越的。幸亏，iframe的自适应高宽无需使用文档大小。而只须要窗口大小和iframe元素大小，其中窗口大小是只读的，因此只须要关心iframe元素大小便可。

　　页面的加载顺序很重要，通常的，咱们使用$(function(){})或window.onload等函数初始化页面，此时，页面中全部元素已经加载完毕。若是内嵌了iframe，一样道理，iframe做为页面的一个普通元素，也是先加载完毕，就是说，父页面的$(function(){})执行时，iframe的全部内容已经加载完毕了。下面是顺序图：

　　

由此，彻底不用再iframe里设置，所有js能够在父页面完成，并且只要调节iframe元素的width,height,scrolling便可。通常的，自适应iframe,将iframe得scrolling设置为auto便可。为了让页面上只显示一个滚动条，还要隐藏父页面的滚动条。那么总结起来，要注意如下事项，便可完成iframe的自适应高宽，并且不用关心跨域，跨浏览器等问题：

　　1.隐藏父页面的（通常为top）滚动条。

　　2.设置iframe这个元素的width,height为某个高宽，scrolling为auto。

　　3.设置$(window).resiez()，或$(#XXX).resize()，使容纳iframe元素的节点在大小变化时，改变iframe的width,height以适应。

经过以上设置，彻底能够作到iframe自适应。此间，不用对iframe中的子页面作任何设置，只须要在父页面完成全部程序。之因此这样，都归功于iframe的srcolling=auto这句程序最后起做用。示例以下：

　　1.全屏无边框：http://www.zangb.com/html/demo/javascript/js_iframe_autoHeight_border.html

　　2.有边框效果更明显：http://www.zangb.com/html/demo/javascript/js_iframe_autoHeight_border.html

四 iframe与无刷新

　　iframe与无刷新有悠久的关系。笔者不知道ajax之前是如何无刷新的，也许是经过iframe。具体能够参看笔者的另外一篇文章：form的target属性。iframe实现无刷新的原理就是在A页面的表单提交数据到服务器，而且指定target属性为B页面，服务器返回内容到B页面，而后在B页面中调用JavaScript程序，来刷新A页面，完成一次请求。若是在此过程当中，B为A页面的一个iframe页面，并且一直不显示，则对用户来讲，就是一个无刷新。

　　这种无刷新比ajax要麻烦，可是一样意义非凡。在上传文件时，ajax是没法提交的，此时iframe彷佛成了不二选择。

　　可是有一个要求，就是AB页面同域。由于在整个过程当中，会在B页面来调用A页面的js对象的方法或函数，就必须保证两个页面同域。不然操做非法。这种无刷新在网上随处可见，淘宝上不少。

五 iframe的跨域

 　  这里主要讲述iframe内html页面的归属。iframe内的html页面能够有两个来源，本域内的页面，外部引用的页面。咱们知道，为了安全，js是不能访问其余页面的对象和方法的，除非两个页面同域。这是能够理解的，由于你不可能但愿别人修改引用你的网站时还修改你的网站。

　　若是有两段代码以下：

 　　A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>

　　 B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

咱们该如何取iframe和子页面？有如下方法代码：

　　var mainIframe = document.getElementById("mainIframe");

　　var mainIframeW = window.frames["mainIframe"];

　　var mainDocument = mainIframeW.document;

分别对应到AB页面是什么意思呢？我想不少人都不是很清晰。下面表格说明：

	mainIframe	maiIframeW	mainDocument
A代码	页面的普通元素，能够经过该对象设置iframe的width,height等一个普通元素的属性,DOM对象	子页面的window对象引用，BOM对象	子页面window对象的文档模型document，能够在父页面对子页面改写
B代码	同A代码，DOM对象	子页面的window对象引用，BOM对象	子页面window对象的文档模型document，不能够在父页面改写

　　有一点要说明，若是两个页面有一个是其中一个的二级域名，能够经过js的方式设置为同域名：document.domain = xxx.xx。

六 iframe与jQuery

　　iframe与jQuery的关系十分简单。只要理解了一点，便可彻底搞清楚：jQuery,$是页面上的一个js对象，即window的一个普通对象，得到这个jQuery对象后，就能够进行操做了。jQuery对象属于页面，若是要访问iframe页面的jQuery对象，首先要保证可以访问子页面的的对象，就是要知足父页面与子页面同域。固然iframe页面也要引入jquery.js。一般是如下写法：

　　1.在父页面访问子页面的jQuery对象。window.frames["xxxIframe"].$("#top")，表示访问子页面的top元素。若是拆分开来，会更容易理解即：

　　var iframe$ = window.frames["xxxIframe"].$;

　　iframe$("#top");

　　这里iframe$就相对于$。

　　2.在子页面访问页面的jQuery对象。parent.$("#top")。拆分开来就是：

　　var parent$ = parent.$;

　　parent$("#top");

　　若是是顶层框架，就是top.$("#top")。

 

七 总结

　　关于iframe的主要知识点就这么多，若是不够详细，请留言。总结以下：

　　1.iframe就是一个普通的html元素，一样能够经过css设置其样式，而起iframe仍是一个inline-block元素。

　　2.只要掌握了父页面和子页面的渲染顺序，就能很容易掌握iframe的自适应高宽。其实很简单，在父页面设置iframe元素的width,height便可，而且scrolling为auto。

　　3.iframe的一个独特用处是，对含有文件上传表单的无刷新提交。

　　4.注意若是iframe的内容是外部网址内容，则不能操做其document。