vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

记录一下新项目集成老项目过程中产生的问题，需要vue项目实现引用HTML，并且实现vue页面可以传递数据到HTML页面，HTML页面也可以反向传递数据给vue页面

1、父页面（vue）传给子页面（html）

vue代码：

//html部分
<iframe :src="url" width="100%"  @load="sendMessage" height="100%" ref="myIframe" id="myIframe" frameborder="0"></iframe>
 
//js部分
sendMessage(){
      // 获取自己的后端数据
      var Fdata = ''
      const iframe = document.getElementById('myIframe');
      iframe.contentWindow.postMessage(Fdata, '*');
      
    },复制

html代码：

 window.onload = function () {
            // 接收父页面传参
            window.addEventListener('message', (event) => {
                if (event.data.type === 'init') {  //初始化数据
                    // 接收到来自 iframe 的消息
                    console.log(event.data,9090909)
                }
                if (event.data.type === 'pointValue') {  //点表数据
                    // 接收到来自 iframe 的消息  
                    console.log(event.data.value,666)
                }
            });
        };复制

2、子页面（html）传给父页面（vue）

父页面代码：

mounted() {
    // 获取子页面传输数据
    window.addEventListener('message', this.receiveChild);
  },
methods: {
    
    //接收子页面数据
    receiveChild(e){
      if(e.data.type == "jsonData"){//
        console.log(e.data.jsonData,777,'接收到了数据')
      }
    },
  },复制

子页面代码：

//html部分
<button id="left_test" title="测试给父组件发布数据"><i class="layui-icon layui-icon-set">测试给父组件发布数据</i></button>
 
 
//js部分
// 测试给父组件发布数据
      document.getElementById("left_test").addEventListener("click", function (event) {
                let data = {
                        jsonData: '测试json数据',
                        type:'jsonData'
                    }
                    // 传参
                    window.parent.postMessage(data, '*')
                });复制