iframe下的qiankun微前端，通过window.top.postMessage无法通信问题

最新推荐文章于 2024-02-19 11:22:36 发布
最新推荐文章于 2024-02-19 11:22:36 发布
阅读量527 收藏 1
点赞数
分类专栏： 前端库的坑 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43260489/article/details/132865660
版权

背景

如题：iframe下的qiankun微前端，通过window.top.postMessage无法通信问题
因为一些必要原因需要通信，比如解决跨域window.open

解决办法

微前端内部通过window?.proxy?.parent?.postMessage跨域通信

qiankun官方文档提到：qiankun 中的代码使用 Proxy 去代理父页面的 window

个人理解：当这个代理的微前端window是iframe时就会遇到window.top !== iframe.parent

window?.proxy?.parent 其实才等于 iframe.parent

Jiangxin829
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
彻底解决 qiankun 找不到入口的问题
MonsterException的博客
08-30 2074
揭秘第三种 qiankun 找入口的方法
本项目采用vue+qiankun实践微前端落地.zip
01-20
Qiankun是阿里开源的一款微前端解决方案，它主要解决了在微前端架构中遇到的路由管理、状态管理、懒加载、子应用通信等问题。Qiankun提供了强大的API，可以方便地集成和管理多个Vue、React或Angular子应用。在描述中...
跨域通信--Window.postMessage()
weixin_30906701的博客
05-10 402
一、跨源通信概述 源：协议、端口号(https默认值433)、主机域名(document.domain) 作用：向目标窗口派发MessageEvent消息（四个属性） 兼容参考 MessageEvent四个属性： 1.message（类型） 2.data（window.postMessage的第一个参数） 3.origin（调用postMessage时页面的当前状态） 4.source（调用po...
iframe跨域通信方案top.PostMassage()的使用
weixin_54508417的博客
01-26 800
1.iframe页面集成跨域通信 top.PostMassage()可以用来对使用firame嵌套的父页面进行通信 top.PostMassage({},*) 1.top.PostMassage()函数接受两个参数 * 参数1 为发送的信息 * 参数2 为发送的指定域 （* 则为所有域） ...
微前端实际应用：iframe、qiankun
qq_45829293的博客
08-16 5493
多应用同时激活在线框架具备同时激活多应用，并保持这些应用路由同步能力组件式的使用方式无需注册，无需路由适配，在组件内使用，跟随组件装卸，卸载应用级别的keep-alive子应用开启保活模式，应用发生切换时整个子应用的状态可以先保存下来不丢失，结合预执行模式可以获得类似ssr的打开模式纯净无污染：利用iframe和ShadowRoot搭建js隔离沙箱和css隔离沙箱利用iframe的history和主应用的history在同一个来搭建天然的路由同步机制性能和体积兼具开箱即用。............
window.postMessage()接收不到信息（失效）
码农桃子的博客
04-18 4189
由于我这里的子窗口调用的是其他公司的页面，所以就不让他们改了。所以，我们可以先通过F12看一下2个通信窗口的位置，确保位置正确，再决定使用什么window对象。那么有人可能会问了，如果父子页面都是自己写的，自己方便改，能不能不通过parent进行通信呢？，比如我项目中，其实是2个iframe在通信，按照上面的通信方式，无法直接监听到。按照正常的代码逻辑，应该是这个样子，通过iframe打开子窗口，能够正常通信。才可以保持通信，比如上面的案例就是间接的父子关系。，具体原因不知道，因为我尝试了一下，结果不行。
前端工程整合_微前端_(iframe,qiankun,micro-app)
weixin_46728068的博客
09-22 1123
微前端方案，micro-app，qiankun，iframe。
微前端架构模板--qiankun.zip
07-14
5. **通信机制**：设置子应用之间的通信机制，例如使用Qiankun提供的messageBus或自定义事件总线。 6. **样式隔离**：根据项目需求选择合适的样式隔离方案，避免子应用之间的样式污染。 7. **测试与优化**：完成...
基于vue+qiankun微前端项目实战vue项目（新手学习）.zip
03-03
基于vue+qiankun微前端项目实战vue项目.zip 本项目采用 vue + qiankun 实践微前端落地。 同时 qiankun 是一个开放式微前端架构，支持当前三大前端框架甚至 jq 等其他项目无缝接入。 此项目为了尽可能的简单易上手，...
乾坤微前端基于vue的子模块开发.docx
08-19
在基于Qiankun的微前端开发中，子应用的创建和通信是非常关键的环节。本文将详细介绍如何进行子应用的搭建以及应用间通信的实现。 首先，让我们从子应用的目录结构开始。一个标准的Vue子应用通常包括以下几个部分：...
qiankun微前端在vue项目中的应用
05-11
qiankun微前端在vue项目中的应用
window.postmessage在父窗口获取子窗口DOM元素
写Bug的小白的博客
12-26 1454
一、背景 我们知道父子窗口使用 window.top.postmessage 可以在页面间传递消息。工作中我们是父页面使用 iframe 嵌入子页面，子页面通过 window.top.postmessage 发送消息给父页面，而父页面中同时存在多个使用同样方式嵌入的子页面，父页面统一使用 window.addEventListener 接收消息并处理，业务场景是父窗口需要知道消息是哪个子窗口发送的。 二、模拟该业务场景 父窗口部分代码 <!DOCTYPE html> <html>
window.postMessage使用详解（参数、transferable接口详解、使用注意点、示例）
热门推荐
AIWWY的博客
12-06 2万+
目录 window.postMessage(message, targetOrigin, [transfer]) 参数 transferable接口详解 使用注意点 实例 窗口1 窗口2 运行效果 事件默认参数 window.postMessage(message, targetOrigin, [transfer]) 可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (.
微前端（Micro-Frontends）qiankun框架原理与实现
qq_39670012的博客
06-15 2417
微前端
【NextJS】nextjs+qiankun遇ReferenceError: window is not defined
无限循环
02-19 688
在nextjs+react中使用qiankun当作主应用时报错 ReferenceError: window is not defined
qiankun微前端学习
weixin_43825389的博客
10-26 1756
微前端学习（qiankun、singleSpa） 一、微前端的优势 什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略 几个核心价值：技术栈无关，独立开发、独立部署，增量升级，独立运行时 特点 基于single-spa封装，提供了更加开箱即用的 API。 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。 样式隔离，确保微应用之间样式互相不干扰。 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。 资源预
umi微服务（qiankun）函数共用
weixin_44091311的博客
02-04 920
umi微服务（qiankun）函数共用 主应用和子应用之间如果想要共用方法，可直接绑定在window上面进行调用 window.fun=(()=>{ console.log('aaa') }) 主应用如果是桌面应用，子应用是网页，子应用想调用主应用的node的方法： 场景：主应用是nw封装的桌面应用，子应用是umi搭建的脚手架网页项目 const fs=window.nw.require('fs') ...
利用qiankun框架在自己项目中集成拖拽式低代码数据可视化开发平台
qq_40596257的博客
03-27 2008
qiankun框架在自己项目中集成拖拽式低代码数据可视化开发平台 vue集成大屏可视化项目 vite集成大屏可视化 大屏可视化集成 微前端可推拽大屏可视化
微前端框架qiankun之原理与实战 ( 转载）
lx233
12-04 3173
原文地址： 微前端框架qiankun之原理与实战_夕山雨的博客-CSDN博客_qiankun原理目录 一、微前端概述 1. 基本原理 2. 微前端的主要优势 3. 当前微前端方案的一些缺点 二、qiankun与single-spa实现原理 1. single-spa实现原理 (1). 路由问题 (2). 应用入口 (3). 应用加载 2. qi
window.open微前端qiankun子应用
最新发布
07-02
在微前端架构中，如 Qiankun（前身为 Weex-vue-loader），它是一个支持组件化、按需加载和隔离的前端模块化方案，常用于构建大型复杂应用中的独立子应用。 Qiankun 主要关注于管理这些子应用（也称为“应用容器”或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值