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
网友评论