当前位置: 首页>前端>正文

iframe 集成 session iframe vh



文章目录

  • 一、iframe是什么?
  • 二、iframe的优缺点?
  • 1.优点:
  • 2.缺点:
  • 为什么尽量少使用iframe?
  • 原因:
  • 三、iframe的一些应用场景?




提示:以下是本篇文章正文内容

一、iframe是什么?

iframe是嵌入式框架,是HTML框架,还是一个内联元素,iframe元素会创建包含另一个文档的内联框架(行内框架),说白了就是,iframe用来在页面嵌入其他的页面。
通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了。

二、iframe的优缺点?

1.优点:

  1. iframe能够把嵌入的网页原样展示出来;
  2. 模块分离,便于更改,如果有多个网页引用的iframe,只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷
  3. 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,增加代码的可用性
  4. 如果遇到加载缓慢的第三方内容,像是图标和广告,这些问题就可以使用iframe来解决;
  5. 重载页面时不需要重新加载整个页面,只需要重新加载页面中的一个框架页;
  6. 方便制作导航栏

2.缺点:

  1. 样式脚本需要额外链入,调用外部的页面,需要额外调用html" class="superseo">css增加页面额外的请求次数,增加服务器的http请求
  2. 代码复杂,在网页中使用框架结构最大的弊病就是搜索引擎的‘蜘蛛’程序无法解读这种页面,会影响搜索引擎的优化,不利于网站的排名
  3. 滚动条除了会挤占有限的页面空间导致iframe布局混乱,还会分散访问者的注意力,影响用户的体验
  4. 链接导航疑问
  5. 产生多个页面,不易于管理
  6. 多数小型移动设备无法完全显示框架,设备兼容性极差

为什么尽量少使用iframe?

iframes提供了一个简单的方式把一个网站的内容嵌套在另一个网站中,iframe的创建比其他包括scripts和css的DOM元素的创建慢了1-2个数量级
使用iframe的页面一般不会包含太多iframe,所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload事件以及连接池(connection pool),即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池,会影响页面的并行加载。

原因:

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

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload事件加载延迟后,它给用户的感觉就是这个网页非常慢
window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发,就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。

  1. 唯一的连接池

对每个 web 服务器来说,浏览器只打开极少的几个连接数。老的浏览器,包括 IE 6/7 和 Firefox 2,每个主机只有2个连接。在新的浏览器中,连接数增加鸟。Safari 3+和Opera 9+增至4个,Chrome 1+、IE 8及Firefox 3增至6个。
在大多数浏览器中,连接被主页面和它的 iframe所共享,这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe中的内容同等重要,或比主页面更重要,这很好。然而在通常情况下iframe中的内容对页面来说不太重要,iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe的src赋值。
总之,iframe会给你的页面性能带来冲击,尽可能不使用iframe,当确实需要时,谨慎地使用他们。目前框架的优点可以使用Ajax实现,这在某种角度也是一种替代方案

三、iframe的一些应用场景?

  1. 典型的像是网页编辑器
  2. 跨域通信:js跨域总结与解决办法,类似的还有浏览器的多页面通信,比如音乐播放器,用户如果打开了多个tab页面,只有一个在播放
  3. 历史记录管理:解决ajax化网站响应浏览器前进后退的方案
  4. 纯前端的utf8和gbk编码互转:比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换;
  5. 用iframe实现无刷新的文件上传,在formData不可用时作为代替方式
  6. 创建一个全新的独立的宿主环境
  7. 用来加载广告,例如联盟广告
  8. 一般邮箱使用iframe,像QQ邮箱
  9. 一些简单的后台页面



https://www.xamrdz.com/web/2xp1935901.html

相关文章: