区块链技术博客
www.b2bchain.cn

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

这篇文章主要介绍了iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame的讲解,通过具体代码讲解7144并且分析了iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame的讲解的详细步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7144.html。具体如下:

 

 

项目背景:

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

 

问题:

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

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

 

解决方法:

          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://www.b2bchain.cn/7144.html

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame的讲解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们