关闭

详解iframe

标签: iframe
96人阅读 评论(0) 收藏 举报
分类:

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。
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3558次
    • 积分:248
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类