vue多个iframe组件利用window.onmessage接收数据不对的问题

最近项目中iframe通信，使用了onmessage

全局提示调用一次只展示一个提示，调用多次则依次展示多个，按照调用先后顺序依次自动关闭，支持：多种提示类型；自定义图标；自定义样式；自定义关闭延时；总之，功能丰富，简单易用，满足你的所有幻想😁

window.onload = function() { var onmessage = function(e) { alert(e); //TempCache.setItem(PtCache.session_token,e.data);//加密密钥 //$("iframe").remove(); //$.mobile...

html5中postMessage和onMessage的用法html5提供了postMessage和onMessage这一对方法来在不同的文档页或者不同的工作线程之间进行通信。在不同的文档页内通信什么叫做不同的文档页？如果一个页面上面嵌套了iframe，那么iframe和外层的页面属于两个不同的文档页。

消息映射的实现 Windows消息概述 Windows应用程序的输入由Windows系统以消息的形式发送给应用程序的窗口。这些窗口通过窗口过程来接收和处理消息，然后把控制返还给Windows。消息的分类 队列消息和非队列消息 从消息的发送途径上看，消息分两种：队列消息和非队列消息。队列消息送到系统消息队列，然后到线程消息队列；非队列消息直接送给目的窗口过程。这里，对消息队列阐述如下：Windows

vue组件和iframe之间的传值-传值总结vue组件和iframe之间的传值-传值总结vue组件传值：vue组件接受值：iframe传值到vue 组件：iframe接收值 vue组件和iframe之间的传值-传值总结 前情提要：由于项目需要，我需要引入一个报表的插件。插件只能使用html的方式调用。 所以,我把插件的使用封装了一个html页面,vue项目则利用iframe的方式引入。 在项目进行过程中，需要iframe和vue组件之间的传值。暂时做个笔记。 vue组件传值： <el-main&gt

var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当前浏览器是否支持WebSocket var wsUrl = serverConfig.cyberhouse_ws+userId; createWebSocket(wsUrl); ...

简介 通常，对于两个不同页面的，只有当它们位于同协议、同域名、同端口时，才可以通信。而window.postMessage() 方法可以安全地实现跨源通信。 语法 发送： otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行wind...

我遇到的情况是micro-app开启微前端的情况下iframe监听接收数据使用window.onmessage无法监听到信息换成addEventListener的方式就可以监听到，考虑到是window.onmessage在 iframe 加载完成前就已经被调用，而window.addEventListener则是在加载完成后才执行的，所以是否window.onmessage在onload之后执行就能成功，此方法未验证；当使用这个方式时，只能绑定一个事件处理函数，如果后续再次赋值，会覆盖之前的处理函数。

由于我这里的子窗口调用的是其他公司的页面，所以就不让他们改了。所以，我们可以先通过F12看一下2个通信窗口的位置，确保位置正确，再决定使用什么window对象。那么有人可能会问了，如果父子页面都是自己写的，自己方便改，能不能不通过parent进行通信呢？，比如我项目中，其实是2个iframe在通信，按照上面的通信方式，无法直接监听到。按照正常的代码逻辑，应该是这个样子，通过iframe打开子窗口，能够正常通信。才可以保持通信，比如上面的案例就是间接的父子关系。，具体原因不知道，因为我尝试了一下，结果不行。

解决子页面收不到父页面的值或子页面收到的数据为undefined的问题； 背景： 初始化时，父页面发送数据给子页面，需要在子页面加载完成后发送，不然接收不到数据。 父页面直接给子页面postMessage发送消息，但是子页面收不到数据；在iFrame.onload函数中发送消息，依旧未收到消息。 解决思路：子页面向主网页发送消息，告诉它子网页加载好了，然后主网页再发送消息给子网页进行处理，这样虽然会多一些交互代码，但可以精确地执行交互。

解决 iframe.postMessage()多次触发请求问题 方法一，将addEventListener改成onmessage window.addEventListener(‘message’, (e) => {})多次调用会多次生成不同的匿名函数e，应指向同一个命名函数 window.addEventListener(‘message’, this.handler.bind(this))，命名函数绑定this后，调用会生成不同的对象 而onmessage则不会 window.onmessage=

iframe postMessage接收不到

`基于vue3实现自己的组件库`