首先了解iframe 是什么？
iframe是html元素，用于在网页中内嵌另一个网页。每个iframe里各自维护自己的全局window对象。
接下来就是iframe之间的通讯的 一般会用于 父页面传递Token给子页面

1.父页面代码
HTML

js 在vue的生命周期里面
向子组件传递 token参数

2.子页面代码
子页面接受 父页面传递的参数

mounted() {
window.addEventListener(‘message’, (ev) => {
// 在这里可以打印一下ev ev中的data属性是父级传的参数
console.log(ev.data);
})
}

这里扩展一下 如果子页面要往父页面传递数据

子页面
beforeCreate() {// 可以在生命周期 方法等 去传递方法给父页面
window.parent.postMessage({ “自定义键”: “自定义值” }, ‘*’) //*号可以指定任意域名
},

父页面
这里跟子页面接受数据的方法一样

mounted() {
window.addEventListener(‘message’, (ev) => {
// 在这里可以打印一下ev ev中的data属性是子级传的参数
console.log(ev.data);
})
}

·亿点小知识 父页面在往子页面传递参数的时候 有时候会 ev.data是undefined 这个时候能不要慌
我们先观察一下 data里面多了个type属性 type: “webpackOk” 这是因为 package 在进行编译的时候先调用了一次 iframe 这时候我们在开发的时候把携带 type 的给过滤掉就好了！
iframe传参undefined
以上就是iframe 嵌套 通信的方法。如遇到其他问题可以私信我一起探讨！