专栏首页Czy‘s Blogiframe框架及优缺点

iframe框架及优缺点

iframe框架及优缺点

HTML5不再支持使用frame,关于frameiframe的区别,可以参阅 iframe与frame的区别

基本使用

  • src:规定在iframe中显示的文档的URL
  • frameborder:规定是否显示框架周围的边框。
  • scrolling:规定是否在 iframe 中显示滚动条。
  • width:规定iframe的宽度,建议使用CSS替代。
  • height:规定iframe的高度,建议使用CSS替代。
  • sandbox:启用一系列对iframe中内容的额外限制。
  • marginwidth:定义iframe的左侧和右侧的边距。
  • marginheight:定义iframe的顶部和底部的边距。
  • srcdoc:规定在iframe中显示的页面的HTML内容。
  • align:规定如何根据周围的元素来对齐此框架,建议使用样式替代。

使用场景

加载其他域的网页

<iframe>是允许跨域请求资源的,但是不能够修改,由此可以在网页中嵌套其他网页,如需要跨域通信的话,需要考虑document.domainwindow.namewindow.postMessage

典型系统结构

典型的系统结构,左侧是功能树,上部为个人信息,右侧就是实际功能,使用iframe将功能单独分离出来,当然也可以使用vuereact进行实现。

实现Ajax

可以使用iframe进行实现异步请求发送,来模拟Ajax的请求操作,Ajax的异步请求完成操作为XHR.readyState === 4执行callbackiframe使用iframe.onload执行callback,还可以实现一个轮询长连接。

加载广告

广告是与原文无关的,假如硬编码进去,会造成网页布局的紊乱,而且这样势必需要引入额外的cssjs文件,极大的降低了网页的安全性,使用iframe便可以解决这些问题。

提交表单

可以使用iframe提交表单来避免整个页面的刷新,还可以实现无刷新文件上传的操作。

优缺点

优点

  1. 可以跨域请求其他网站,并将网站完整展示出来
  2. 典型系统结构可以提高代码的复用性
  3. 创建一个全新的独立的宿主环境,可以隔离或者访问原生接口及对象
  4. 模块分离,若多个页面引用同一个iframe,则便于修改操作
  5. 实现广告展示的一个解决方案
  6. 若需要刷新iframe则只需要刷新框架内,不需要刷新整个页面

缺点

  1. iframes阻塞页面加载,影响网页加载速度,iframe加载完毕后才会触发window.onload事件,动态设置src可解决这个问题。
  2. 加载了新页面,增加了cssjs文件的请求,即额外增加了HTTP请求,增加了服务器负担。
  3. 有时iframe由于页面挤占空间的原因出现滚动条,造成布局混乱。
  4. 不利于SEO,搜索引擎的爬虫无法解读iframe的页面。
  5. 有些小型的移动设备如手机等无法完全显示框架,兼容性较差。
  6. iframe与主页面是共享链接池的,若iframe加载时用光了链接池,则会造成主页面加载阻塞。

参考

https://www.zhihu.com/question/20653055
https://www.cnblogs.com/hq233/p/9849939.html
https://blog.csdn.net/baxiadsy_csdn/article/details/86245809

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OAUTH开放授权

    OAUTH开放授权为用户资源的授权提供了一个安全的、开放而又简易的标准。OAUTH的授权不会使第三方触及到用户的帐号信息例如用户名与密码等,即第三方无需使用用户...

    WindrunnerMax
  • 提莫攻击

    在《英雄联盟》的世界中,有一个叫 “提莫” 的英雄,他的攻击可以让敌方英雄艾希(编者注:寒冰射手)进入中毒状态。现在,给出提莫对艾希的攻击时间序列和提莫攻击的中...

    WindrunnerMax
  • CSS劫持攻击

    CSS劫持是一种并不很受重视的劫持方式,但是其也有一定的危害,且由于其并不一定需要依赖JavaScript,这使得此种攻击方式更容易实现。

    WindrunnerMax
  • 根据获取内部元素的高度,设置iframe的高度

    德顺
  • 深入理解iframe

    iframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)

    Leophen
  • iframe 解析

    简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/1126515...

    郑小超.
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • 前端进程间通讯的渗透之术

    父页面和子页面(iframe)处于2个不同的进程(即使在同一个域),进程之间的通讯必须通过每个进程内【事件监听所在的线程】来完成。最重要的是,通讯时传输的数据格...

    Jean
  • 动态创建iframe标签页并监控其加载成功(onload)的事件

    Jerry Wang
  • 解决各种情况下的iframe高度自适应内容

    方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。我们使用www.a.com下的另一个页面agent.h...

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券