微前端--iframe背景随着业务线的增加，团队支线的扩展，单一的项目也越来越多。但也满足不了对整体业务的掌控。需要有

序言：微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。

背景

随着业务线的增加，团队支线的扩展，单一的项目也越来越多。但也满足不了对整体业务的掌控。需要有一个聚合系统来统筹和关联各个业务线。微前端方案应运而生，本文只就iframe方案浅谈一下：

项目构成：

主项目
- 子项目一
- 子项目二
- ...

主项目和各个子项目都是单独的项目，独立开发、部署、运行。

主项目做统一的登录，子项目权限控制。

优势

降低项目的维护复杂度，子项目单独迭代维护；
使各个业务最大程度地解耦；
增量更新，独立部署，快速回滚；
与技术栈无关，新老项目都可兼容

问题一

使用iframe微前端方案，需要解决最大的问题就是主项目和子项目的通信问题。使用postmessage这个方法可以实现iframe的跨域传参

父页面

child.contentWindow.postMessage("摸鱼","http://localhost:5500/1.html")

子页面

在子页面中,通过window.onmessage这个事件来监听,并且传入一个参数,就能获取到父页面传递的值了

window.onmessage = function(e){
    console.log(e.data)//摸鱼
}

用法:

我们需要在父页面中,注册子页面的load事件中执行代码

<body>
    <h1>父页面</h1>
    <iframe id="child" src="http://localhost:5500/1.html" height="200" frameborder="0"></iframe>
</body>
<script>
    let child = document.querySelector("#child");//获取子页面
    child.onload = function(){//子页面的load事件
        child.contentWindow.postMessage("p2c","http://localhost:5500/1.html")
    }
</script>

问题二

子项目中的遮罩正常弹出只会覆盖iframe区域，不会覆盖整个屏幕。所以对话框的遮罩要覆盖住全屏，那么 iframe 的宽高就需要和屏幕宽高一样大（准确说是浏览器可视区域）。

这里有两个实现方式：

当用户点击新建按钮的时候，给父项目发个消息，让父项目去修改下 iframe 的宽高，然后子项目在同时在给自身添加 padding ，使内容区缩小到原内容区宽高。
iframe 的宽高本身就和屏幕宽高相等，子项目给自身添加 padding ，使内容区缩小到原内容区宽高；同时正常情况下，header、aside、面包屑的层级需要高于iframe的层级，如此，iframe 不会阻止这些区域的点击；当用户点了新建按钮，对话框出现的时候，给父项目发送一条消息，让父项目调高 iframe 的层级，如此，遮罩便可以覆盖全屏。

在这里，我最终选择了第二种方案，因为使用第一种方案时，由于 iframe 突然之间的宽高变化，会使得内容区一闪而过的宽高改变，用户体验很不好，所以最后我使用的第二种方案。