码迷,mamicode.com
首页 > 其他好文 > 详细

关于vue项目和内嵌iframe页面之间的通信问题

时间:2018-12-31 21:10:55      阅读:516      评论:0      收藏:0      [点我收藏+]

标签:col   原来   vue   list   参考   eid   主页   obj   语法   

最近项目中遇到一个与内嵌iframe页面之间通信的问题,起初与原生之间通信很简单,没想到过与vue项目通信的问题,霎时间一脸懵*啊,百度了一下,原来是那么简单,这里记录下以供下次参考

//vue页面 向 内嵌iframe传递事件

// vue页面代码
let frame = document.getElementById(‘iframeId‘);  // 或者用vue语法 let frame = this.$refs.iframeId
frame.contentWindow.postMessage(object,‘*‘);   //  object为传送的对象   *号为接收数据的项目地址



// iframe页面
window.addEventListener(‘message‘,function(event){
    

·// 传送的数据在event.data里面 })
//  iframe页面向vue项目页面传递事件

//  iframe页面
window.parent.postMessage(object,‘*‘);   //  object为需要传送的数据对象  *号为接收数据的项目url地址

//主页面
window.addEventListener(‘message‘,,function(event){
    
         //  数据在event.data对象中
})

 

关于vue项目和内嵌iframe页面之间的通信问题

标签:col   原来   vue   list   参考   eid   主页   obj   语法   

原文地址:https://www.cnblogs.com/cscredis/p/10203214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!