首先了解iframe 是什么？

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

1.父页面代码

HTML

<template>
  <div >
    <iframe name="myiframe" id="myrame-record-query" src="http://192.168" 
    frameborder="0" align="middle" width="80%" height="900px"></iframe>
  </div>
</template>

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

<script>
mounted() {
    var that = this
    this.iframe = document.getElementById('myrame-record-query')
    this.iframe.onload = function () {
      // iframe加载完成后要进行的操作  这里要等 iframe加载完毕
       let param = {
        token:"***"
      }
      this.iframe.contentWindow.postMessage(param, '*')*号可以指定任意域名
    }
}
</script>

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 嵌套 通信的方法。如遇到其他问题可以私信我一起探讨！