iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame

 

项目背景:

部署本地服务器项目,后台管理系统内需要用iframe嵌入另一个功能项目,需要能够互相传值进行操作

问题:

       

          翻译之后是跨域了,因为浏览器的同源策略问题

解决方法:

          1:父页面向子iframe传值

(在父页面的js里获取到iframe,然后向iframe传值,然后这么写就行了,第一个参数是需要传的数据,也可以是对象)

 var frame = document.getElementsByClassName('interfaceEditor')[0];
 frame.contentWindow. postMessage ("数据", '*');

(在子iframe的js里监听获取父页面传的值)

window. addEventListener ('message', function(event) {
    //event.data获取传过来的数据
  console.log(event.data)
});

              2:子iframe向父页面传值

(在子iframe里面这么写.   data是数据,  第二参数是你父页面的地址)

 window.parent.postMessage(data,'http://localhost:8080/');

(在父页面这么写,e.data就是子页面传的数据.)

window.addEventListener('message',function(e){
    var Date=e.data;
    console.log(Date)
},false);

项目实测成功