泰州市统计局网站建设方案中国纪检监察报记者

背景：前端项目采用 qiankun 框架开发，主应用使用 vue2 ，子应用使用 react16+umi。项目部署时使用 nginx， 部署在同一台服务器上，主项目部署在一级目录，子项目部署在二级目录。其中主应用的有一个需求是，将各个子系统的日志功能集中到主应用统一管理。而针对于某一个子应用，有一个特殊处理的功能，根据主应用中的日志记录，可以查看子应用中的业务流转记录。基于这种场景，使用到了 iframe 加载子应用。

遇到的问题：

一、本地开发时，主应用使用 iframe 无法加载子应用页面。

解决方案一：部署到服务器上。

二、部署到服务器时，nginx 缺少配置导致无法加载同源页面。

报错信息：

“Refused to display 'http://localhost:8088/' in a frame because it set 'X-Frame-Options' to 'deny'” 

修改配置：

location / {add_header X-Frame-Options SAMEORIGIN;
}

三、主应用中加载的子应用页面，包含了主应用的公共导航、菜单、底部结构。

加载 iframe 页面后的通信：

主应用：

export default {mounted(){window.addEventListener('message',this.handleMessage);},beforeDestory(){window.addEventListener('message',this.handleMessage);},methods:{handleMessage(event){const {action,status} = event.data;if(action == 'subappRendered' && status == 'success'){const iframeDom = document.querySelector('#iframe').contentDocument;const openSidebarDom = iframeDom.querySelector('.el-header');const elHeaderDom = iframeDom.querySelector('el-footer');elHeaderDom && openSidebarDom.removeChild(elHeaderDom);elFooterDom && openSiderbardom.removeChild(elFooterDom);const elContainerDom = iframeDom.querySelector('.el-container');const elAsideDom = iframeDom.querySelector('.el-aside');elAsideDom && elContainerDom.removeChild(elAsideDom);const footerDom = iframeDom = iframeDom.querySelector('.footerClass');footerDom.style.display = 'none';}},}}

 子应用：

export default {mounted (){window.parent.postMessage({action: 'subappRendered',status: 'success'},'*');}
}