H5-PostMessage跨域传参

一、前言

    postMessage是H5的跨域传参方式，坑比较多，以下为自己亲测可指定ip地址的传参！

二、正文

1、参数发送方

//例如点击1个按钮，打开新的页面
document.getElementById("btn").onclick = function () {
        //打开子页面，指定传参ip地址
        var newWindow = window.open("http://localhost:8080")
        //监听message事件，当子页面打开完成，并且反馈加载完成消息的时候，
        //进行参数的传递
        window.onmessage =function (e) {
          //可指定要传参数到ip地址,这个要传参数到http://localhost:8080中
          if(e.origin == "http://localhost:8080"){
            newWindow.postMessage({
              sysNo:"02"//系统号
            },"http://localhost:8080")
          }
        }
      }

2、参数接收方

//被传参的页面加载完成后，向发送数据的页面发个信息，只有子页面加载完成后，传参才会成功！这点至关重要！
 window.opener.postMessage("ok","http://10.31.57.80:82")
    //监听数据变化，用来截取postMessage传来的数据
    window.addEventListener("message",function (e) {
    //可指定传参的ip地址
      if(e.origin == "http://10.31.57.80:82"){
        //e.data为传来的数据
		_this.msg = e.data;
      }
    })

总结：

    此方式，由本人亲测，绝对有效！