PostMessage函数实现iframe嵌套页面的数据传递

最近在公司开发中遇到移动端官网首页用iframe嵌套登录页，想要在点击获取验证码的时候整个页面会有模态框弹出，但是实际弹出的模态框只能在iframe里面全覆盖，没有办法弹出覆盖到外面，下面写了简单小demo效果：

下面点击验证码弹出的是的iframe嵌套的大小，没有能将下面灰色整个父盒子的区域遮住

image.png

之前用了一个方法在iframe嵌套的那个页面动态给父级创建一个模态框，然后再动态给移除，现在公司两个网址的协议改了以后，现在不行了，报错提示存在跨域

注意：下面是为了方便讲解我自己瞎编的两个网站的网址：

a网页：http://a.com.cn (这个a网页是需要嵌套b网页的页面)
b网页：https://b.com.cn （这个b网页是登录页面）

a网页(http://a.com.cn)：

<div class="box">
    <iframe id="ifr" class="box2" src="https://a.com.cn" width="" height=""></iframe>
</div>

这个时候a网页js里面写入,下面做了一个sit测试环境判断

window.onload = function (){
    //父盒子创建模态框
    var _div=document.createElement('div');
        _div.style='position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 0;background-color: rgba(0, 0, 0, 0.7);';
        window.addEventListener('message',function (e){

              message的时间对象是e ,e有三个属性
              e.source：发送消息的窗口
              e.origin: 消息发向的网址
              e.data: 消息内容

            //sit环境判断  
           if(e.origin== "https://b.com.cn" || "https://bsit.com.cn"){
               e.data=="1"?document.body.appendChild(_div):document.body.removeChild(_div);
            }
      },false);
}

b网页(https://b.com.cn)：

此处也对父页面的环境做了判断，传过去的是 "1"，下面的url就是要传给的父盒子的网址。父页面根据传过来的1，来判断要不要动态创建模态框，剩下的就是给iframe的z-index层级高于父盒子的模态框，不然会被父页面的模态框盖住，

var msk = function msk() {
        var URL = window.location.href;
        var url = "";
        if (URL.indexOf("sit") > -1) {
            url = "http://a.com.cn";
        } else {
            url = "http://a.com.cn";
        }
        window.parent.postMessage("1", url);
    };

下面就可以实现了