iframe标签的基本使用及其优缺点

iframe的定义与用途

定义

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。这是官方文档的原话，有点难以理解，实际上就是在你的页面上外链一个页面出来，以窗口的形式呈现在你的页面中。

用途

• 可以用于嵌入第三方资源，比如广告、视频或音频等等。使用iframe可以保证页面代码的简洁，还能让文挡之间有隔离不用担心相互之间有影响
• 在H5出现之前还能解决无刷新文件上传、长轮询等功能，但H5出现后就被统一处理了，所以这个标签使用的情况少了很多

iframe的属性

属性	说明
src	指定网页的地址
width	内嵌网页的宽度
heigth	内嵌网页的高度
frameborder	0 /1 表示是否显示边框（0为否）
scrolling	yes/or/auto 是否显示滚动条
id	为框架的唯一标识
name	会和标签中的name相互对应

这里的属性都很简单，不再多讲，重点讲一下name属性；通常和target搭配使用，看以下例子：

<a href="https://www.baidu,com" target = "chaungkou">baidu</a>
<a href="https://www.jianshu,com" target = "chaungkou">jianshu</a>
<iframe id="Myframe" name="chaungkou"></iframe>
/*这样就实现了两个a标签点击后都只在一个iframe中呈现了*/

iframe的优缺点

优点

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• 能并行加载脚本
• 方便管理，指的是如果有多个页面需要用到iframe的内容，那么只要修改iframe的内容就可以实现统一管理
• iframe可以原封不动的把嵌入的网页显示出来

缺点

• 会产生很多的页面，不容易管理
• 会增加服务器的http请求对大型网址不可取
• 会阻塞父页面的load事件
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载，也就是说子文档和父文档的请求数会被计算在一起
• 不利于搜索引擎优化，也就是不利于SEO

解决办法：如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题

iframe的应用场景

这里我们可以用CSDN作为例子，随便点进一个页面，就会弹出一个弹窗让你的登录，这里的弹窗就是一个iframe

img.jpg