postMessage方法内嵌页面跨域传参

业务背景：
由于客户工作需要，提出需求，要在其他业务系统内内嵌本系统页面，让业务系统的系统用户成为本系统客户，并以客户身份处理业务。
方案：
父页面（业务系统页面）
子页面（本系统页面）
业务系统新建页面A，A里面有个 iframe ，将本系统页面B嵌入iframe，传递参数加签，后台验签。
A：

<iframe style="border:0px;width:100%;height:100%;display: block; border: 1px dashed #ccc; height: 800px;" src="http:xx.xx.xx/xxx.html" id="child"></iframe>

<script>
window.onload=function () {
		window.frames[0].postMessage(JSON.stringify(obj), 'http:xx.xx.xx/'); 
        window.addEventListener('message', function(messageEvent) {
            var data = messageEvent.data;
            console.info('message from child:', data);
        }, false);
};
</script>

<body onload="touch_audio();"></body>

<script>
    function touch_audio(){
        window.addEventListener('message', function(ev) {
            var data = ev.data;
             console.log(data)
                }
            }
        }, false);
    }
</script>

子页面中window.addEventListener(）中 ev参数可以拿请求的父页面的ip地址，后台根据ip地址做个密钥管理，前台获取到数据后，将数据和ip地址传到后台，后台根据ip地址查找密钥，用密钥解密后，将业务系统的编号与请求地址对应的业务系统编号做对比，以确定是否为已对接平台的客户。

遇到过的问题：
获取到的数据乱码——业务平台页面编码改成 utf-8。
校验事件传参为空（加载顺序原因）——给body标签加上加载方法，强制优先加载 window.addEventListener。
后期需求要求自定义iframe内嵌页面路径，经过尝试发现，改变iframe默认路径后，addListener会报错（“iframe访问路径与默认访问路径不一致”），当iframe的路径为 # 或空时，浏览器会默认为当前域名，后面用js动态修改路径后，会出现问题，目前还没有找到解决方式。

原文链接：https://blog.csdn.net/qq_38734891/article/details/108403200