iframe元素的学习(笔记)

什么是iframe：iframe元素即内联框架，iframe是内联的并且承前启后，对于外围的页面,iframe是一个普通的元素，对于iframe里面的内容，又是一个五脏俱全的页面。重下面的写法可以看出，iframe就是一个普通的元素，与span、div一样。注意，iframe既不是内联元素也不是块元素，因为它是可以设置width和height并且不会换行，所以它是inline-block元素。

一个简单的iframe元素的写法是：

<iframe id="newframe" name="newframe" src="xin.html"></iframe>

iframe元素的常用属性：

1、  frameborder：是否显示边框，yes、no

2、  height：框架作为一个普通元素的高度，最好使用css设置

3、  width：框架作为一个普通元素的宽度，最好使用csss设置

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

5、  scrolling：框架是否滚动。yes、no、auto

6、  src：内框架的地址，可以是页面地址，也可以是图片的地址在这些属性中，frameborder、scrolling、src几乎所有的iframe都用到它们，典型的iframe元素一般是：

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

关于iframe自适应高度：所谓的高度自适应，一般就是要嵌入的iframe符合一定的要求(内嵌的iframe要适应父页面，当需要滚动条时滚动条显示，不需要时就不显示。当父页面窗口发生变化时，iframe也会变化。当iframe的内容变化时，其滚动条也要适应)。Iframe的自适应高宽只需要窗口大小和iframe元素大小，其中窗口大小是只读的，所以只需要关心iframe元素大小即可。只要注意以下事项就可以了：隐藏父页面滚动条。设置iframe元素的宽和高。Scrolling为auto。设置$(window).resiez()或者$(“#ID”).resiez()，使容纳iframe元素的节点在大小变化时没改变iframe的宽和高以适应。

iframe与无刷新：iframe实现无刷新的原理就是在A页面的表单提交数据到服务器，并且指定target属性为B页面，服务器返回内容到B页面，然后在B页面中调用JS程序，来刷新A页面，完成一次请求。如果在此过程中，B为A页面的一个iframe页面而且一直不显示，则对用户来说，就是一个无刷新，这种无刷新比ajax要麻烦，但在上传文件时，ajax是无法提交的，此时iframe似乎成了不二选择。但有一个要求就是AB两个页面要同域。

iframe与jquery：iframe与jquery的关系十分简单，jquery和$是页面上的一个JS对象，即window的一个普通对象，获得这个jquery对象后，就可以进行操作。如果要访问iframe页面的jquery对象，首先要保证能访问子页面的对象，当然iframe页面也要引人jquery.js。

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

var iframe$ = window.frames["xxxIframe"].$;
iframe$("#top");