iframe + postMessage 实现跨域通信的相关问题

页面结构

父级页面：a.vue ；    嵌套iframe的URL： http://a/iframe.page.html；

a.vue代码如下：

<template>
    <div>   
        <p>
        这是主界面，嵌套IFrame页面
        </p>  
        <iframe src="http://a/b/iframe.html" id="contentIframe">  </iframe>
     <div>
</template>

父级给子级发消息

在a.vue（父级）中嵌套iframe页时，当父级页面给iframe发送消息时，需要拿到接受消息的iframe的DOM对象，然后再进行消息发送：

// 先拿到iframe的DOM对象，然后再发消息
const val = 'theme1';
const oEl = (document.getElementById('contentIframe')['contentWindow'] as any)
oEl.postMessage({ type: 'CURRENT_SKIN', data:val }, '*');

在iframe链接地址的系统中（嵌套的子系统），对type的事件类型进行监听。代码如下：

window.addEventListener('message', function (event) {
      // console.log('收到当前皮肤::::', event);
      const oState = event.data;
      if (oState.type === 'CURRENT_SKIN') {
        // console.log('收到当前皮肤');
        //   收到信息后，可以操作了。
      }
    });

子级给父级回传消息

子系统给a.vue(父级页面)发消息，也需要找到parent.window,再发消息。代码如下：

window.parent.window.postMessage({type:'FINISH_CURRENT_SKIN',data:true},*)

父级接收消息，代码如下

window.addEventListener('message', function (event) {
      // 监听iframe页是否收到“CURRENT_SKIN”发送的信息，
      // 收到后，关闭“CURRENT_SKIN”的信息发送定时器。
      const oState = event.data;

      if (oState.type === 'FINISH_CURRENT_SKIN') {
          // console.log('收到当前皮肤');
          clearInterval(that.sendCurrentThemeOfTimer);
          that.sendCurrentThemeOfTimer = null;
        }
    });