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);

 

项目实测成功

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值