共计 1768 个字符，预计需要花费 5 分钟才能阅读完成。
问题形容
想要在 A 零碎中关上 B 零碎的内容进行数据操作。
产生起因
现有已存在的前端我的项目中，有些零碎数据是相关联的，从 A 我的项目批改数据后，又要关上 B 我的项目拿数据操作，以致用户操作不不便。
解决方案
一、iframe 嵌套
父零碎
1、在父零碎中须要配置相干菜单（或者说是路由）
2、在父零碎中依据路由创立页面文件
html 局部：
页面嵌套一个 iframe 标签，src 就是须要调用的页面 url（线上残缺门路）。
<template>
<iframe @load="sendMessage" :src="url" ref="iframe"></iframe>
</template>js 局部：
当 iframe 加载完后，向浏览器通过 postMessage 发送约定俗称的信息（比方：code 为 200 是两个零碎约定的标记，示意这是约定的信息；token 也能够间接拼接在 url 上，次要思考到 token 外泄、字符过长等场景，才把 token 放在通信里）。
postMessage能够实现跨域通信，第一个参数示意要通信的内容，第二个参数示意要通信的指标地址（该场景是 A 嵌套 B，A 要向 B 发送信息，所以应该是 B 地址。’*’ 示意任意窗口都能够接管到）。
sendMessage() {
const iframe = this.$refs.iframe.contentWindow;
iframe.postMessage(
{
code: '200',
token: 'xxx',
}, '*'
);
}3、iframe 嵌套存在无奈缓存的问题，但能够把全副的 iframe 放在一个组件里，通过 v -show 管制是否展现，让人视觉上感觉页面已缓存。（iframe 组件要与 <keep-alive> 节点平级）
布局文件：
<keep-alive :include="alive" :exclude="exclude">
<router-view></router-view>
</keep-alive>
<iframeTemporary></iframeTemporary>iframeTemporary 文件：
第一个 v -show 是管制是否呈现 iframeTemporary 这个组件，因为若是呈现这个组件，须要占据整个页面；第二个 v -show 是管制呈现路由对应的 iframe 标签页面。（具体细节就须要缓缓调整，比方 tab 页显示，iframe 页面切换操作等。
<template>
<div class="iframe" v-show="">
<iframe v-show="$route.name === item.name" v-for="item in iframeList" :key="":src="item.src":key="item.key"></iframe>
</div>
</template>子系统
1、在路由文件中监听 postMessage 传输过去的数据。
onmessage 事件肯定要在 beforeEach 外面，要管制在 iframe 嵌套的状况下，监听到约定内容（code 为 200，解决完 token 信息），页面能力跳转；否则就会 token 生效。
router.beforeEach((to, form , next) => {if(window.top.location !== window.self.location) {
// iframe 嵌套
window.onmessage = (event) => {if(event.data && '200' === event.data.code) {
// 通过约定俗成的内容，判断是否是已知窗口传递过去的音讯
// 解决内容，比方 token 信息
// 页面跳转
...
}
}
}
else {
// 页面失常跳转
...
}
})2、若是存在多个页面跳转，且带有参数信息，子项目也能够通过 postMessage 传递音讯。（可在路由的 query 局部，加一个标记字段辨别是否要在 iframe 中关上，比方 isFrame）。
router.beforeEach((to, form , next) => {if(window.top.location !== window.self.location) {if(to.query && to.query.isFrame) {// 参数解决}
}
})二、微服务
应用乾坤框架，能够达到微服务的目标，当初我的项目还有一些问题，临时不做总结，能够参考官网文档 qiankun
