您现在的位置是:网站首页> C#技术

关于iframe跨域使用postMessage的实现

摘要

关于iframe跨域使用postMessage的实现

解决方法:

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

 


项目实测成功


Top