一、iframe是什么？

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

二、iframe的优缺点？

1.优点：

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

2.缺点：

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

为什么尽量少使用iframe?

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可以避免这种阻塞情况。

唯一的连接池

对每个 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的一些应用场景？

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

浅谈 iframe的优缺点以及使用场景相关推荐

浅谈iframe的优缺点及应用场景
浅谈iframe的优缺点及应用场景对iframe的优缺点及应用场景的一点小结浅谈iframe的优缺点及应用场景 iframe 创建包含另外一个文档的内联框架(即行内框架),简而言之,iframe标 ...
台式计算机的优点,相比台式机，浅谈一体机电脑优缺点！
一体式电脑是将主机部分.显示器部分整合到一起的新形态电脑.这种产品的创新在于内部元件的高度集成.有些厂商称之为 All In One.AIO电脑或屏式电脑.相比台式机,下面装机之家来浅谈一体机电脑优缺 ...
后端语言除了java_浅谈后端语言优缺点
浅谈后端语言优缺点兄弟连教育在前不久,回答了一个关于后端语言选型的问题,那么后端语言都有哪些,存在什么样的优缺点?因此兄弟连与大家分享一下心得. 语言优缺点 C/C++ C 语言虽然是非常贴近操作系 ...
聊聊 iframe 的优缺点以及使用场景
一,使用 iframe 的优缺点 1,优点实现了页面的"模块化".比如一个网站的多个页面有统一的导航栏,这样就可以写成一个页面,用 iframe 来嵌套,增加代码的重用性. 2, ...
浅谈RPA 在银行领域的十个场景应用
现阶段随着科技水平的不断发展,经济的日益繁荣,人们很多需要到银行的操作渐渐的转移到了手机等移动端,这就导致了银行需要更加快捷与便利的服务方式来满足客户的需要与需求.然后现在很多银行或者银行的流程还在依 ...
浅谈Iframe和FRAME的区别
一.Iframe标记的使用 Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件.现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个" ...
浅谈AI与5G的结合场景
近几年Machine Learning与Deep Learning技术不断应用于各行各业,严格地讲AI算法可以用来预测一切,比如预测一场球赛或者预测一支股票再或者预测房价甚至可以预测人的寿命,当然,前 ...
浅谈java的序列化/反序列使用场景
Java的序列化简介 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件 ...

浅谈 iframe的优缺点以及使用场景

文章目录