详解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标签用法详解

iframe标签用法详解(属性、透明、自适应高度)

序言:iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe属性。 1、iframe ...
  • duhai
  • duhai
  • 2014-03-29 00:22
  • 532

iframe参数详解

iframe参数详解 iframe runat="server" src="you page's url" width="750" height="30&quo...

Flex IFrame使用详解

(1) IFrame使用方法:           1.下载swc库文件,导入lib,在页面拖入IFrame,添加IFrame的source属性即可嵌入网页!    &#...

Iframe 详解

frame与Iframe的各项属性 frame例子: Sorry,your explorer doesn't support the frame... ...

(23)HTML标签详解之<frameset><frame><iframe><noframes>

HTML标签详解之    html5已经不支持frameset了,看了大家的解决方法,无非就是两种: 1. 使用iframe,但是目前使用iframe的人已经越来越少了,而且iframe在不同浏览器之...

iframe标签用法详解(属性、透明、自适应高度)

1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DT...

iframe跨域通信封装详解

iframe跨域通信 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。 用法举例: 需求是在http:/...

iframe标签用法详解

iframe标签用法详解 iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的ifram...

Iframe 标签详解

Iframe 标签详解 example.htm 是被嵌入的页面,标签 还有一些可用的参数设置如下: marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth=...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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