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

最新推荐文章于 2025-06-19 08:10:05 发布

原创

最新推荐文章于 2025-06-19 08:10:05 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了Vue项目中页面与内嵌iframe之间的通信方法，包括iframe向Vue页面传递数据及Vue向iframe页面发送数据的实现代码，涉及window.postMessage API的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue页面 向 内嵌iframe传递事件
// vue页面代码
let frame = document.getElementById('iframeId'); //目的是获取这个iframe元素
 // 或者用vue语法 let frame = this.$refs.iframeId
frame.contentWindow.postMessage(object,'*');   //  object为传送的对象   *号为接收数据的项目地址

// iframe页面（写到mounted中）
window.addEventListener('message',function(event){
    
·// 传送的数据在event.data里面
})

2.iframe页面向vue项目页面传递事件

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

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

实例代码：

1.iframe页面向vue页面传值

window.parent.postMessage({"title":data.label,"id":data.id,"area":data.area,"dccname":data.attributes.dccname,"sttype":data.attributes.nodetype,"flag":"s1"}, "*");

vue页面接受

window.addEventListener("message", function(){receiveMessage.call(window.vue,event)}, false);
}
function receiveMessage(event){
console.log(event.data