项目背景
最近重构项目遇到一个历史遗留问题，我们业务有很多html单页面，这些单页面承载了一些业务功能。我们前端项目需要通过iframe引用这些单页。如遇到问题或者新增功能就要修改单页，数量小的时候批量修改还可以接受，但是随着业务增多，单页数量指数级增多这样如果再批量修改就是一个麻烦问题了。
那么有没有什么好办让前端项目来直接操作iframe呢
首先梳理下最初的需求：
- A应用通过iframe调用单页B。
- B单页有大量DOM操作，CSS样式。
- B单页修改需要修改原始文件，不能通过传值等动态修改，无法完成动态定制功能等
- A应用如直接调用B会造成跨域问题。
思考下这些问题的解决方法
- A应用如果想直接跟B单页通信跨域问题需要用到postMessage,解决了A跟B的通信问题。
- 如果A想直接操作B的DOM、css样式，需要传复杂的参数。
- B单页有很多的重复方法，可以把重复方法提取出来封装成公共方法，然后通过A应用来动态引入。
- 再次引用一个C页面，这个C页面跟B单页同源，A引用C,C引用B。C通过A传来的type来判断不同的操作类型，动态加载css/js获取B操作B单页
- 通过这一系列的引用就能解决我们原始的问题，也不会造成跨域问题等，以后只需要修改C页面就能批量的处理B单页资源
- 通过一张图就能顺利的理解
开始码代码吧~
A页面
