react项目中利用标签嵌入 VUE项目</h1><div class="info">2020-09-15  本文已影响0人  <a href="/user/hovibxtx.html" target="_blank">Pluto_7a23</a><span class="Size"><i class="big" id="fontsize"></i></span></div><div class="content"> <p>目前公司官网用react写的。东西台多还比较繁重。索性利用iframe标签嵌入vue项目</p> <img src="https://img.haomeiwen.com/i20452983/20a65f27ae092d49.png"> <p>var data = {'code': 123}<br>childFrameObj.contentWindow.postMessage(JSON.stringify(data),vue项目链接);</p> <p>把想要专递的数据通过childFrameObj.contentWindow.postMessage传过去。必须要以字符串的形式。后面的要传递的链接</p> <p>然后VUE页面接收 </p> <p>在created里面</p> <p> window.addEventListener('message',function(event){</p> <p>console.log('解密',event.data) 获得react传过来的值</p> <p>}，false）；</p> <p>vue页面通过下面的函数吧想要传递的数据给react传回去</p> <p>var data = {'enter':'1'}</p> <p> window.parent.postMessage(JSON.stringify(data), react项目链接);</p> <p>react项目接收</p> <p> window.addEventListener('message', function(e) {</p> <p> console.log('data from domain2 ---> ' + e.data);</p> <p>}，false）；’</p> <p>这样就可以完成传递了</p> <p><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWindow%2FpostMessage" target="_blank"> href="</a><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWindow%2FpostMessage" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage</a> API官网</p></div><div class="clear"></div></article><script type="text/javascript">meiwen("body");</script><div class="clear"></div><dl class="article-next-prev"><a href="/article/173436.html" title=" 《腾讯没有梦想》一文反映了哪些问题？"><i></i>上一篇</a><a href="/article/174225.html" title="一字千军论丑（原创）"><i></i>下一篇</a></dl><div class="clear"></div><script type="text/javascript">meiwen("page");</script><div class="clear"></div><div class="box"><dt class="hd"><h3>猜你喜欢</h3></dt><dd class="bd"><ul class="list-pic"><li><a href="/article/69447.html"><img class="lazy" src="/uploads/thumbnail/53.jpg" width="320" height="211"/><span>再论专注</span></a></li><li><a href="/article/163474.html"><img class="lazy" src="/uploads/thumbnail/4.jpg" width="320" height="211"/><span>今天暴风雪中</span></a></li></ul><ul class="list"><li><span>01-21</span><a href="/article/82623.html">热闹不等于吵闹</a></li><li><span>06-08</span><a href="/article/32976.html">论不积跬步无以至千里</a></li><li><span>07-20</span><a href="/article/5039.html">中国古典诗词离当代人有多远</a></li><li><span>09-02</span><a href="/article/6894.html">纪念抗战胜利70周年：回望历史勿忘国耻</a></li><li><span>01-20</span><a href="/article/14445.html">电影制片人是做什么的</a></li><li><span>01-10</span><a href="/article/164560.html">幽灵恐怖事件</a></li></ul></dd></div><script type="text/javascript">meiwen("rand");</script><div class="box"><dt class="hd"><h3>热点阅读</h3></dt><dd class="bd"><ul class="list-pic"><li><a href="/article/15396.html"><img class="lazy" src="/uploads/thumbnail/53.jpg" width="320" height="211"/><span>早餐里见世界</span></a></li><li><a href="/article/166780.html"><img class="lazy" src="/uploads/thumbnail/97.jpg" width="320" height="211"/><span>谏言：全国的扫黑反腐</span></a></li></ul><ul class="list"><li><span>08-22</span><a href="/article/6256.html">浅谈对“天津爆炸事故”的看法和感想</a></li><li><span>07-04</span><a href="/article/38138.html">元芳你怎么看下一句</a></li><li><span>07-03</span><a href="/article/38098.html">陪伴是最长情的告白下一句</a></li><li><span>01-21</span><a href="/article/17790.html">你知道fighting是什么意思？告诉你fighting的意思</a></li><li><span>06-23</span><a href="/article/36811.html">深度好文：生命的意义不单是幸福</a></li><li><span>06-20</span><a href="/article/36171.html">深度好文：人最怕深交后的陌生</a></li></ul></dd></div><div class="sort"><ul><a href="/wenzhang/aiqing/">爱情文章</a><a href="/wenzhang/qinqing/">亲情文章</a><a href="/wenzhang/youqing/">友情文章</a><a href="/wenzhang/xinqing/">心情文章</a><a href="/wenzhang/lizhi/">励志文章</a><a href="/wenzhang/jieri/">节日文章</a><a href="/wenzhang/xiaoyuan/">校园文章</a><a href="/wenzhang/jingdian/">百家杂谈</a></ul></div><center style="background:#fff"><script type="text/javascript" src="//dm.cyewang.com/gbtxkdjth.js"></script></center><footer><div class="meiwen"><a href="/member/" >会员管理</a><a href="/new.html">最近更新</a><a href="/pic.html">美文美图</a><a href="/sitemap.html">网站地图</a></div><div class="copyright"> © 2014-2018 <a href="/">美文阅读网</a> 版权所有 </div></footer><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript" src="/img/meiwen.min.js"></script><script type="text/javascript">meiwen("footer");</script></body></html>