iframe的作用优缺点应用场景

iframe就是我们常用的iframe标签

iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。

iframe标签的属性
align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。
frameborder:1、0。用于规定是否显示框架周围的边框。
height:pixels、%。用于规定iframe的高度。
longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。
marginheight:pixels。定义iframe的顶部和底部的边距。
marginwidth:pixels。定义iframe的左侧和右侧的边距。
name:frame_name。规定iframe的名称。
scrolling:yes、no、auto。规定是否在iframe中显示滚动条。

src:URL。规定在iframe中显示的文档的URL。
width:pixels。%。定义iframe的宽度。

优缺点:

优点: 

1.iframe能够把嵌入的网页原样展现出来;

2.模块分离,便于更改,如果有多个网页引用iframe,只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷;

3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,增加代码的可重用;

4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决;

5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页;

6.方便制作导航栏。

缺点: 

1.样式和脚本需要额外链入,调用外部页面,需要额外调用css,增加页面额外的请求次数,增加服务器的http请求;

2.代码复杂,在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面,会影响搜索引擎优化,不利于网站排名;

3.框架结构有时会让人感到迷惑,滚动条除了会挤占有限的页面空间外会使iframe布局混乱,还会分散访问者的注意力,影响用户体验;

4.链接导航疑问。运用框架结构时,必须保证正确配置所有的导航链接,否则,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他地点可去; 

5.产生多个页面,不易管理;

6.多数小型的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。

使用iframe的页面一般不会包含太多iframe,所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload事件以及连接池(connection pool),iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池,会影响页面的并行加载。

iframes阻塞页面加载,影响网页加载速度

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload事件加载延迟后,它给用户的感觉就是这个网页非常慢。

window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发,就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。

iframe可用在以下几个场景中:

1:典型系统结构,左侧是功能树,右侧就是一些常见的table或者表单之类的。为了每一个功能,单独分离出来,采用iframe。 
2:ajax上传文件。 
3:加载别的网站内容,例如google广告,网站流量分析。

4: 在上传图片时,不用flash实现无刷新。

5: 跨域访问的时候可以用到iframe,使用iframe请求不同域名下的资源。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部