详解iframe

原创 2016年08月29日 21:20:22

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。
版权声明:本文为博主原创文章,未经博主允许不得转载。

iframe标签用法详解

iframe标签用法详解
  • baidu_25310663
  • baidu_25310663
  • 2015年08月25日 13:35
  • 27253

Joomla源代码解析(十一) JHtml 类

JHtml 没有几个函数,但是在组成页面已经模板书写过程中经常用到,比如:JHTML::_(date, $this->item->date, JText::_(DATE_FORMAT_LC5))以及在...
  • ForEvErNoME
  • ForEvErNoME
  • 2011年07月02日 17:10
  • 482

标签自动绑定onbeforeunload事件的问题

IE下,如果在a标签的href中设置了javascript:,则会自动调用onbeforeunload事件 此外, 父容器包含一个iframe,在父容器中设置onbeforeunload事件不会影...
  • jingliu_squirrel
  • jingliu_squirrel
  • 2008年05月09日 15:59
  • 696

html中iframe用法解析

该文章地址http://www.jb51.net/web/14537.html Iframe用法精析 用于设置文本或图形的浮动图文框或容器。 BORDER 设定...
  • wclxyn
  • wclxyn
  • 2012年02月23日 19:07
  • 4444

Iframe详解

Iframe详解1.什么是Iframe?iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。2.Iframe的优缺点在使用任何一项技术之前我们都有必要对其特性进行深入了解,这有助于我们思...
  • TJ_DS
  • TJ_DS
  • 2016年11月11日 21:51
  • 382

Iframe 详解

Iframe 详解2007-01-08 11:19 frame与Iframe的各项属性   frame例子:...
  • whoami1731
  • whoami1731
  • 2008年01月02日 14:22
  • 877

谈IFRAME标签的使用作用及技巧

纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀“的东西”日益消...
  • shendeguang
  • shendeguang
  • 2012年11月10日 21:53
  • 1211

iframe详解

iframe的使用场景:a>通过iframe实现跨域;b>使用iframe解决IE6下select遮挡不住的问题c>通过iframe解决Ajax的前进后退问题d>通过iframe实现异步上传。(Eas...
  • csdn_huzeliang
  • csdn_huzeliang
  • 2018年01月19日 15:17
  • 26

iframe是什么?iframe用法详解。

经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些...
  • Shirley_Ying
  • Shirley_Ying
  • 2016年11月21日 16:58
  • 310

iframe是什么?iframe用法详解

经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些...
  • ruiguang21
  • ruiguang21
  • 2016年12月12日 17:54
  • 136
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:详解iframe
举报原因:
原因补充:

(最多只允许输入30个字)