最近项目中遇到一个与内嵌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对象中 })