1. 什么是iframe
iframe（inline frame）是一种HTML标签，可以嵌入一个HTML文档到另一个HTML文档中。通常情况下，这个被嵌入的HTML文档来自于不同的域名或者主机，这也成为了iframe的一个重要应用场景。比如，在一个购物网站中，可以使用iframe嵌入第三方支付平台的支付页面，让用户进行支付操作。
<iframe src="http://www.example.com"></iframe>1.1 iframe的优点
虽然iframe经常被人吐槽，但是它仍然有一些优点：
方便嵌入其他网站的内容
可以异步加载内容，减少网页加载时间
可以控制和限制嵌入的内容，进行安全控制
1.2 iframe的弊端
同时，iframe也有很多缺点，下面我们来一一解析。
2. iframe的弊端
2.1 对SEO不友好
iframe内部的链接并不会对父页面的SEO产生影响，反而是会影响到子页面的seo权重。因为搜索引擎无法识别iframe的内容，所以被嵌入的页面的内容也不会对父页面的SEO产生贡献。
<iframe src="http://www.example.com"></iframe>在这种情况下，访问http://www.example.com的页面对SEO起到了作用，而嵌入该页面的页面并没有得到任何好处。这也是为什么很多站长不推荐使用iframe。
2.2 会增加页面的加载时间
使用iframe来异步加载其他页面的内容的确可以减少页面的加载时间，但是嵌入了比较复杂的页面或者页面中含有较多的媒体文件的时候，就会增加页面的加载时间。因为iframe的内容需要通过网络来获取，这个过程需要花费一定的时间。
2.3 容易破坏页面布局
很多时候，iframe的高度需要根据被嵌入页面的高度来设置。而有些被嵌入的页面是动态的，高度不能确定，这个时候就很容易破坏整个页面的布局。除此之外，由于iframe的宽度和高度不受页面布局的限制，超出页面边缘的iframe会影响整个页面的可用性。
2.4 安全问题
由于iframe具有跨域的特性，所以对于一些恶意网站的iframe嵌入，会存在较大的安全隐患。恶意网站可以在iframe中注入毒瘤代码，劫持你的session，获取你的个人信息。
2.5 可访问性问题
对于那些视力较差或者屏幕阅读器用户来说，iframe的使用会造成不便。因为如果在iframe中嵌入一些关键信息，这些用户就很难看到。
3. iframe的使用场景
虽然上面提到了很多iframe的弊端，但是它也有很多实际的应用。下面我们来看看iframe的常用场景。
3.1 用于跨域嵌入页面
这是iframe最常见的用途之一，使用在应用页面和第三方页面的跨域嵌入。这个场景下，第三方页面有独立的域名和服务器，无法直接获取应用的数据。网站开发人员可以使用iframe把第三方页面嵌入到应用页面中，并在iframe中模拟用户的操作，从而获取需要的数据。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!</iframe>3.2 嵌入多媒体内容
我们知道，浏览器本身有很多支持媒体内容的标签，比如video标签和audio标签。但是有些时候需要嵌入第三方视频平台（比如youtube）的视频。这个时候就可以使用iframe把视频页面嵌入到你的页面中。这样，就可以方便的播放第三方媒体内容。
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>3.3 嵌入其他网站的小部件
有些情况下，我们只需要一个小部件而非整个页面。比如，在一个文章列表页面中，使用新浪微博的功能让用户直接进行微博分享，可以考虑把新浪的微博分享页面嵌入到列表页中，这个时候就可以使用iframe了。
<iframe src="http://widget.weibo.com/weiboshow/index.php?</iframe>4. 总结
如果使用不当，iframe的确会存在很多问题，但是它也有很多实际的应用场景。了解iframe的优点和弊端，合理使用iframe，可以让我们的网站更安全和富有吸引力。