关于跨域 Iframe 页面通信的问题总结

父页面嵌入子页面（不同域）

parnet.html

 <iframe id="iframe" :src="'http://10.127.20.100:8080/index.html'></iframe>

通信：父页面向子页面发送消息的方式：

let contentWindow = document.getElementById('iframe').contentWindow
  contentWindow.postMessage('hi ~ my son!', 'http://10.127.20.100:8080/index.html')

父页面接受子页面的方式：

 window.addEventListener('message', function(evt){
    let sondata =evt.data // 子页面的消息
});

子页面给父页面发消息的方式：

 window.parent.postMessage('hellow father!', '*');
// 接受父页面消息
window.addEventListener('message', function(evt){
    //消息内容
let data =evt.data
});

其中需要注意的是，子页面一定要写上html文件，否则跨域的时候会出现接受不到消息的情况。（这是我踩到坑，本地调试不同端口都没问题，上线到其他ip和端口后有问题了）

另外由于浏览器的安全机制，子页面是用不了cookie 的，如果需要存储本地缓存，可以用localstorage进行缓存。

如果父页面存在多个子页面，需要有不同的通讯方式，那就要在postmesage里写好指定的html了