vue中嵌入白鹭资源，使用postMessage实现跨域通信

维护一个项目的时候遇到的，在vue中已经内嵌了一个空页面，跳转白鹭资源的游戏页面，但是要实现跳转的同时发送用户以及游戏的信息。所以想到了跨域通信postMessage参考官网
然后很纠结，因为使用了这个方法拿不到信息，后来才解决。

template

 <iframe id="iframe" src="https://testpc.jc2929.com/static/game/pcindex.html" frameborder="0" style="height: 774px;width:1000px;"></iframe>

script

methods:{
sendData(){
	  let gameId = localStorage.getItem("gameId"); //游戏ID
      let userid = localStorage.getItem("userid"); //用户ID
      let userToken = localStorage.getItem("userToken");
      let contentPop = localStorage.getItem("userName"); //跑马灯显示的文字
      console.log(contentPop)
      // console.log(JSON.parse(contentPop).infrPmd);
      //以上部分都是在从本地获取数据
      let gameinfo = new Object();
      console.log("check");
      gameinfo.gameId = gameId;
      gameinfo.userid = userid;
      gameinfo.userToken = userToken;
      // 跑马灯显示的文字
      if (contentPop) {
        gameinfo.pmdcontent = JSON.parse(contentPop).infrPmd;
      }
      console.log(gameinfo); //game数据
      //下面这句话是重点，发送信息。
      document
        .getElementById("iframe")
        .contentWindow.postMessage(gameinfo, "*");**
}
//我是在methods中写了这个方法，在mounted中调用
		mounted() {
		this.sendData();
		}

第一次测试，我发送了信息，但是那边获取不到。解决办法：在mounted调用的时候添加setTimeout延迟2秒

  mounted() {
    setTimeout(() => {
      this.sendData();
    }, 1800);
    }

发现可以获取到数据，但是有个缺陷，我这边固定是延迟两秒以后发送信息，万一接收信息那边游戏加载时间过长，还是会出现收不到信息的情况。解决办法：接收信息处发回一个参数，我监听参数，如果存在这个参数，说明信息接收成功，否则，我继续发送信息，一直到能监听到参数为止。还是修改mounted部分

 mounted() {
    setTimeout(() => {
      this.sendData();
    }, 1800);
    let a = setInterval(() => {
      if (window.addEventListener) {
        window.addEventListener("message", function(event) {
          if (event.data != "sendStatus") {
            this.sendData();
          } else {
            console.log(event.data);
            clearInterval(a);
          }
        });
      }
    }, 1200);
  },
  }

OK，暂时没发现问题了，我了解的可能太少，欢迎指教