记业务的坑用iframe来救？

最近在承接公司一个大需求，涉及两个项目和一个公共库。然而，公司技术相对滞后还没有采用微前端架构。所以坑苦了我

坑的点

由于没有微前端架构，所以一个项目增加的组件无法被另一个项目使用。虽然公共库内的组件可以被A、B两个项目分别使用。但是公共库自身内，没有新增需求的依赖组件数据和业务组件。现状是大部分业务组件都在A项目下，然后还想被使用在B项目内。当然由于公司项目目前使用了dva的数据框架，并且这个需求牵扯到的组件多的不计其数。根本无法通过copy完成。而且所需要的接口也很多。简直就离个大谱。

应对方案

开始以为不幸中的万幸是B项目一定会在A项目加载后出现，所以讲A目前所需组件挂在到了window上，然后在公共库内加工出来。这样使用了公共库的B项目就可以直接使用了。有了方案就是开发、提测。结果意外发生了。测试竟然直接通过路由进入了B项目，然后询问之下发现。公司重度用户都是用过多tab工作。所以坑的最低点来了。

补救措施

有了这个场景，就说明B项目依赖的A项目资源并不是一定在B出现前出现。第一点就想到了iframe在B中去加载组件A。

iframe的使用

1. 父用子。这里是直接操作子iframe即可。操作路径有三种：第一种，通过iframe的id，获取内容。第二种，通过iframeName获取。第三种通过frames数组角标或者frames[iframeName]获取。
2. 子用父。这里也是操作父元素。路径有俩：第一种，通过parent属性获取，第二种是通过top属性获取。注意：这里top是指顶级元素。这里指二级结构时可同样适用。
3. 同级子互用。这里相当于1 + 2。先操作父，在街父之手操作另一个自即可。这里直接使用代码说明，帮助大家理解。

<iframe name="name" id="id" src="demo.html"></iframe>
<iframe name="name1" id="id1" src="demo1.html"></iframe>
<iframe name="name2" id="id2" src="demo2.html"></iframe>

// 通过兄弟iframe的id获取其dom
parent.window.document.getElementById('id1').contentWindow.youFunc(); 
parent.window.document.getElementById('id2').contentWindow.document.getElementById('元素id');

// 通过iframe的name
parent.window.name1.window.youFunc(); 
parent.window.name2.window.document.getElementById('元素id'); 

// 通过window对象的frames[]数组对象直接获取子frame对象
parent.window.frames[1].youFunc();
top.window.frames[2].document.getElementById('元素id');

parent.window.frames["name1"].youFunc();
parent.window.frames["name2"].document.getElementById('元素id');
           

结束语