本文共 652 字，大约阅读时间需要 2 分钟。

项目背景:

部署本地服务器项目,后台管理系统内需要用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);

项目实测成功

转载地址：https://blog.csdn.net/qq_45533841/article/details/105489582 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！