Web PostMessage

postMessage API  H5新加的内容,支持ie8及其以上. 却可用于实现不同源之间消息通信

使用场景 a标签中有iframe,iframe引用b页面,实现ab页面的相互通信 需要两个页面相互配合

const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
  if (e.origin !== 'https://expected-origin.com') {
    return;
  }
  e.source.postMessage('Ack!', e.origin);
};

  eg.
        btn.onclick = function(){
                //当访问的页面B为同源页面时,可以直接进行操作,但是同源文件必须有相关权限
                //如果方位的页面B为非同源文件时,显示是没有问题的,但是要在A页面操作B页面,就要解决跨越问题.
                //参数1  往B页面传送的信息.
                //参数2  B页面所在的域
               win.contentWindow.postMessage("info","http://10.90.84.246");
       };
       window.addEventListener("message",function(ev){
             var ev = ev || event;
             //ev.data    表示其他页面传过来得内容
             //ev.origin  表示消息源的域
             //ev.target  当前页面的window对象
             //ev.srcElement  消息源的window对象
             //      console.log(ev.data);
         if(ev.data=="info"){
               var p = document.getElementById("p");
               p.style.fontSize = "40px";
               p.style.color = "red";
               document.body.style.background = "yellow";
          }       
       },false);