详解iframe

1、iframe的介绍

    iframe在布局、无刷新网页等方面有很重要的地方。虽然现在很流行div布局，但是有时依然会用到iframe布局。在2005年人们开始使用ajax进行无刷新，但是在一些特效情况下还得使用iframe；特别是在flash动画内嵌套html时，使用的更多。    iframe即内联框架。对于外围的页面，iframe是一个普通的元素，对于iframe里面的内容，又是一个五脏六腑俱全的页面。iframe就是一个普通的元素，与span、div一样。那么，iframe是内联元素还是块元素？首先，iframe和canvas标签一样可以设置宽（width）和高（height）并且有效。其次，iframe像普通文本一样不会换行， 因此iframe是一个行内块元素（inline-block）；

2、iframe的属性及特点

    iframe的基本属性与其它元素一样，有样式的，也有特有的。对于样式部分可以使用css设置，以下为iframe的常用属性。    1. frameborder ：是否显示边框 ， 取值  yes ， no；    2. height：框架作为一个普通元素的高度，建议采用css设置；    3. width：框架作为一个普通元素的宽度，建议采用css设置；    4. name：框架的名称，window.frame[name]时专用的属性；    5. scrolling：框架是否带有滚动条，取值 yes ，no ；    6. src ： 内框架的地址，可以是页面地址，也可以是图片的地址；            相对一般标签，iframe特别属性只有三个： frameborder，scrolling，src，所有的iframe几乎都要指定。

3、iframe自适应高度

所谓iframe高度自适应，一般就是要嵌入的iframe符合以下要求：    1.内嵌的iframe，要适应父页面，当需要滚动条。滚动条显示，不需要时，滚动条不显示。    2.当父页面窗口发生变化式，iframe也会变化。    3.当iframe的内容变化式，其滚动条也要适应。

4、iframe高度设定

页面加载时，我们都是使用$(funciton(){})和window.onload等函数初始化页面，此时，页面中所有元素已经加载完毕。如果内嵌了iframe，同样的道理，iframe作为页面的一个普通元素，也是先加载完毕，就是说，父页面的$(function(){})执行时，iframe的所有内容已经加载完毕。以下是加载顺序的过程：    父窗口大小由用户确定--->子页面加载完毕---> 父页面加载完毕--->在父页面改写iframe元素的width，height--->子页面的窗口大小确定--->根据iframe的scrolling属性调节滚动条--->渲染完毕。 有上述可见，完全不用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的scrolling:auto这句程序最后起作用。

5、iframe和jquery

    iframe与jquery的关系并不麻烦，只要理解一点即可。jquery，$是页面上的一个js对象，即window的一个普通对象，获得这个jquery对象后，就可以进行操作了。jquery对象属于页面，如果要访问iframe页面的jquery对象，首先要保证能够访问子页面的对象，就是满足父页面与子页面同域。当然iframe页面也要引入jquery.js，通常是以下写法：    1.在父页面访问子页面的jquery对象。window.frames["xxxiframe"].$("#top"),表示访问子页面的top元素，如果拆分开来，会更容易理解即：    var  iframe$ = window.frame["xxxiframe"];    iframe$("top");    这里iframe$就相对于$;    2.在子页面访问页面jquery对象。parent.$("#top")。拆分开来就是：var parent$ = parent.$;  parent$("#top"); 如果是顶层框架，就是 top.$("#top");

6、总结：

    1. iframe 就是一个普通的html元素，同样可以通过css设置样式，而起iframe还是一个inline-block元素；    2. 只要掌握了父页面和子页面的渲染顺序，就能很容易掌握iframe的自适应高度。其实很简单，在父页面设置iframe元素的width，height即可，并且scrolling为auto；    3. iframe的一个独特用处是，对含有文件上传表单的无刷新提交。    4. 注意如果iframe的内容是外部网址内容，则不能操作其document。