vue nested iframe parameter communication

First understand what is an iframe?

An iframe is an html element used to embed another web page within a web page. Each iframe maintains its own global window object.
The next step is the communication between iframes, which is generally used to pass Token from the parent page to the child page

1. Parent page code

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 passes token parameters to subcomponents in the life cycle of vue

<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. Subpage code

The child page accepts the parameters passed by the parent page

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

Let’s expand here if the child page wants to pass data to the parent page

Subpage

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

parent page

This is the same as the way the subpage accepts data

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

亿点小知识 When the parent page passes parameters to the child page, sometimes ev.data is undefined. At this time, don’t panic. Let
’s first observe that there is an extra type attribute in the data type: "webpackOk". This is because the package calls the iframe once when compiling. When we are developing, we can filter out the type that carries the type!

The above is the method of iframe nested communication. If you have any other questions, you can private message me to discuss together!