我正在参加「掘金·启航计划」
在我们使用 iframe 之前，必须了解其缺点，然后在合适的场景，通过 iframe 实现我们的目的
缺点
影响页面性能
其一
iframe 会阻塞主页面的 onload 事件
当 iframe 中的内容加载过慢时，会明显的影响到父页面的初始化
其二
iframe 会和页面共用连接
在不同的浏览器且最新版本中，最大的也不过是建立 8 个 连接 （一般也就是 4-6 个连接） 。当 iframe 在加载资源时用光了所有的连接时，自然就会阻塞父页面的加载。
html 连接数
指 html 在请求资源时，可以同时建立的最大的连接数量
iframe 和父页面之间的交互非常困难
在不跨域的情况下，iframe 与父页面的交互、以及相互控制的操作，能做到，但很麻烦
在跨域的情况下，无法在父页面控制 iframe 中的元素；同样的，在 iframe 里也无法控制父页面的元素
丢失 cookie、session
我们在做常规的后台管理系统时，经常需要通过 cookie， session 来记录用户的信息、以及登录的状态，这一缺陷是非常的致命
查找的资料如下：
谷歌最新版的浏览器默认
SameSite=Lax（该设置从2020 年7月14全面展开，具体见：www.chromestatus.com/feature/508… 如果设置SameSite=Lax, 并且嵌入 iframe 的地址和 iframe 外的地址不是 SameSite，那么嵌入 iframe 的地址将无法设置设置 cookie。
此缺点存在与谷歌浏览器
相应的解决方案如下：
- 在谷歌浏览器搜索
chrome://flags/#same-site-by-default-cookies和chrome://flags/#cookies-without-same-site-must-be-secure，将这两项设置为Disabled，并重启浏览器。这种方法可以临时解决用户不能使用的问题。 - 更换为火狐浏览器，实测最新版的火狐浏览器无这个问题
在作为正式产品时不太实际，但用于演示时则刚刚好
优点
独立的环境
iframe 能够创建一个全新的、独立的环境，使之与父页面的环境隔离
即 iframe 中的元素，不会受到来自父页面中的 js、css 的影响，方便我们将 iframe 中的元素当成一个全新的页面进行开发
跨域加载第三方页面
通过 iframe，我们可以将第三方的页面嵌入至自己的页面里，这是 iframe 的特性，也是我们使用 iframe 的理由。
在解决了跨域的基础上，我们可以使用 nginx 反向代理替换相关的 js 来控制第三方页面，具体的案例可以查看我的这一篇文章 nginx 解决跨域问题嵌入第三方页面
