文章目录
- 需求
- 分析
- 父传子
- 子传父
需求
一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目之间进行通信
分析
在Vue项目中通过iframe嵌套另外一个Vue项目时，可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API，它允许在不同的window或iframe之间发送消息。
父传子
- A项目中父组件中调用B项目并发送 msg
- B项目中子组件中接收B项目发送的 msg
window.addEventListener('message', function (e) { e.stopPropagation(); //防止异常 try { let data = JSON.parse(e.data); //转化为json if (data.sign === 'waterAndRain') { if (data.value === '1') { } } else { } } catch (err) { } });如果上述代码看不太明白，那么
下面是一个示例代码，演示了如何在父窗口和子窗口之间使用postMessage方法进行通信：
在父窗口中：
// 获取iframe元素 const iframe = document.querySelector('#myIframe') // 监听message事件 window.addEventListener('message', (event) => { // 判断消息来源是否为iframe的地址 if (event.source === iframe.contentWindow) { // 处理接收到的消息 console.log('收到来自子窗口的消息：', event.data) } }) // 发送消息给iframe iframe.contentWindow.postMessage('Hello from parent', '*')在子窗口中：
// 监听message事件 window.addEventListener('message', (event) => { // 判断消息来源是否为父窗口的地址 if (event.source === window.parent) { // 处理接收到的消息 console.log('收到来自父窗口的消息：', event.data) // 发送消息给父窗口 window.parent.postMessage('Hello from child', '*') } })在上述代码中，我们首先获取了用于嵌套另一个Vue项目的iframe元素。然后，在父窗口中监听了message事件，当接收到来自iframe的消息时，就会将消息打印输出到控制台中。
接着，在父窗口中使用postMessage方法向iframe发送了一条消息。
在子窗口中，我们也监听了message事件，并判断消息来源是否为父窗口的地址。当接收到来自父窗口的消息时，就会将消息打印输出到控制台中，并使用postMessage方法向父窗口发送了一条消息。
需要注意的是，当使用postMessage方法发送消息时，第二个参数指定的是消息的目标窗口的origin，这里我们使用通配符*表示允许发送消息到任何域名，但在实际应用中建议设置具体的域名。
子传父
首先，在被调用者子组件中，使用postMessage方法将消息传递给父窗口：
- 子页面
// 在被调用者子组件中 // 向父窗口发送消息 window.parent.postMessage('Hello from child', '*')然后，在调用者父组件中，通过监听message事件接收子组件传递的消息：
mounted() { window.addEventListener('message', this.handleMessage) }, methods: { handleMessage(event) { // 处理接收到的消息 console.log('收到来自子组件的消息：', event.data) }, }或
// 在调用者父组件中 // 监听message事件 window.addEventListener('message', (event) => { // 判断消息来源是否为被调用者子组件的地址 if (event.source === document.querySelector('iframe').contentWindow) { // 处理接收到的消息 console.log('收到来自子组件的消息：', event.data) } })在上述代码中，被调用者子组件通过window.parent.postMessage方法将消息发送给父窗口。注意，这里的window.parent表示父窗口的全局对象。
在调用者父组件中，我们使用window.addEventListener方法监听message事件，并通过判断消息来源是否为被调用者子组件的地址来确定是否处理该消息。
通过这种方式，被调用者子组件可以将消息传递给调用者父组件，实现跨域通信。
需要注意的是，由于涉及到跨域通信，需要确保两个项目的域名不同，否则会受到浏览器的同源策略限制。同时，也需要确保被嵌套的项目正确设置了允许跨域访问的响应头。
- 子页面
- B项目中子组件中接收B项目发送的 msg
- A项目中父组件中调用B项目并发送 msg
猜你喜欢
- 15天前(中旅酒店 维景)中旅酒店首次AI数字人直播亮相南京维景
- 15天前(甘州区文化旅游局)2025甘津文旅资源对接推介会在兰州举办
- 15天前(东北地区全域旅游)东北三省一区宣传贯彻研学旅游行业标准
- 15天前(罗马尼亚的匈牙利族自治)江苏赴匈牙利、罗马尼亚开展文旅交流推广活动
- 15天前(新西兰“空降”上海：新西兰旅游局邀请你来“玩真的”！)新西兰“空降”上海：新西兰旅游局邀请你来“玩真的”！
- 15天前(“清透会呼吸”轻松拿捏春日出游氛围感)“清透会呼吸”轻松拿捏春日出游氛围感
- 15天前(美诺酒店集团旗下臻选品牌m collection)美诺酒店集团启动盛橡品牌战略焕新 开启全球扩张新篇章
- 15天前(2025年安徽省“百场黄梅唱响百家景区”示范展示启动)2025年安徽省“百场黄梅唱响百家景区”示范展示启动
- 15天前(殷建祥简历)全国十大牛商解码：殷建祥如何用178天技术突围打造星空梦星空房
- 15天前(福州“一县一桌菜”“两马乡宴”品鉴会圆满举办,马尾美食共叙血脉亲情)福州“一县一桌菜”“两马乡宴”品鉴会圆满举办,马尾美食共叙血脉亲情
网友评论
- 搜索
- 最新文章
- (2020广州车展哈弗)你的猛龙 独一无二 哈弗猛龙广州车展闪耀登场
- (哈弗新能源suv2019款)智能科技颠覆出行体验 哈弗重塑新能源越野SUV价值认知
- (2021款全新哈弗h5自动四驱报价)新哈弗H5再赴保障之旅，无惧冰雪护航哈弗全民电四驱挑战赛
- (海南航空现况怎样)用一场直播找到市场扩张新渠道，海南航空做对了什么？
- (visa jcb 日本)优惠面面俱到 JCB信用卡邀您畅玩日本冰雪季
- (第三届“堡里有年味·回村过大年”民俗花灯会活动)第三届“堡里有年味·回村过大年”民俗花灯会活动
- (展示非遗魅力 长安启源助力铜梁龙舞出征)展示非遗魅力 长安启源助力铜梁龙舞出征
- (阿斯塔纳航空公司)阿斯塔纳航空机队飞机数量增至50架
- (北京香港航班动态查询)香港快运航空北京大兴新航线今日首航
- (我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉)我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉
- 热门文章