window的两种监听方式区别

一、window.onmessage
window.onmessage 是一个属性,直接赋值为事件处理函数。当使用这个方式时,只能绑定一个事件处理函数,如果后续再次赋值,会覆盖之前的处理函数。如果在同一个页面中只有一个地方需要处理消息,这种方式可能是足够的.
window.onmessage是HTML5的方法,用来解决跨页面通信,或者通过 iframe嵌套的不同页面的通信问题。postMessage为发送方,onmessage为接收方

window.onmessage = function (event) {console.log(event)
}

需要注意的是:window.onmessage需要在 iframe 加载完成后才能正常工作。你可以将其放在window.onload事件中,以确保在 iframe 加载完成后再执行监听器
二、window.addEventListener
window.addEventListener(‘message’, function, useCapture)
2.1、useCapture参数是一个可选的布尔值,表示事件是否在捕获阶段处理。如果该参数为true,则事件在捕获阶段执行回调函数;如果为false或省略该参数,则事件在冒泡阶段执行回调函数
2.2、addEventListener 方法允许你添加多个事件处理函数,而不是覆盖现有的处理函数。这在多个组件或模块需要处理消息时非常有用。
2.3、这种方式更加灵活,因为你可以添加多个监听器,而不会相互干扰

window.addEventListener('message', function(event) {console.log(event, '-------')
}, false)

三、说明
我遇到的情况是micro-app开启微前端的情况下iframe监听接收数据使用window.onmessage无法监听到信息换成addEventListener的方式就可以监听到,考虑到是window.onmessage在 iframe 加载完成前就已经被调用,而window.addEventListener则是在加载完成后才执行的,所以是否window.onmessage在onload之后执行就能成功,此方法未验证;目前使用window.addEventListener监听能够正常使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611361.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ELF文件格式解析二

使用objdump命令查看elf文件 objdump -x 查看elf文件所有头部的信息 所有的elf文件。 程序头部(Program Header)中,都以 PT_PHDR和PT_INTERP先开始。这两个段必须在所有可加载段项目的前面。 从上图中的INTERP段中,可以看到改段…

《GreenPlum系列》GreenPlum详细入门教程02-GreenPlum安装

文章目录 第二章 GreenPlum安装1.Docker创建centos容器1.1 拉取centos7镜像1.2 创建容器1.3 进入容器1.4 容器和服务器免密操作1.4.1 生成密钥1.4.2 拷贝密钥 1.5 安装ssh服务和网络必须应用1.6 容器设置root密码1.6.1 安装passwd应用1.6.2 容器本机root设置密码 1.7 容器本机免…

leetcode双指针问题总结 Python

目录 1. 二分查找 2. 有序数组中寻找两个数和等于某数 3. 两数平方和 4. 翻转字符串中的元音字符 5. 判断是否为回文字符串(最多可以删除一个字符) 6. 归并两个有序数组 7. 判断链表是否有环 8. 最长子序列 1. 二分查找 从有序数组 nums 中查找…

uniapp获取手机当前信息及应用版本

appVersion 是app端查询的数据信息 appWgtVersion 是浏览器端查询的数据信息 onLoad() {const systemInfo uni.getSystemInfoSync();console.log(systemInfo);// #ifdef H5const uniAppVersion systemInfo.appVersion;// #endif// #ifndef H5const uniAppVersion systemIn…

C++学习笔记——对象的指针

目录 一、对象的指针 二、减少对象的复制开销 三、应用案例 游戏引擎 图像处理库 数据库管理系统 航空航天软件 金融交易系统 四、代码的案例应用 一、对象的指针 是一种常用的技术,用于处理对象的动态分配和管理。使用对象的指针可以实现以下几个方面的功…

无法访问Bing网站 - 解决方案

问题 Bing官方网址:https://www.bing.com/ 电脑无法访问Bing网站,但手机等移动设备可以访问Bing网站,此时可尝试以下方案。 以下方案适用于各种系统,如Win/Linux系统。 解决方案 方案1 修改Bing网址为:https://www4…

JAVA毕业设计632—基于Java+ssm的宠物店商城系统(源代码+数据库)

毕设所有选题: https://blog.csdn.net/2303_76227485/article/details/131104075 基于Javassm的宠物店商城系统(源代码数据库)632 一、系统介绍 本项目分为用户、营养师、管理员三种角色 1、用户: 登录、注册、宠物信息、宠物粮食、宠物用品、宠物疫…

二叉树基础oj练习(单值二叉树、相同的树、二叉树的前序遍历)

讲了这么多数据结构相关的知识(可以看我的数据结构文章专栏): 抓紧刷题巩固一下了 目录 1.单值二叉树 题目描述 思路1 代码1 思路2 代码2 2.相同的树 题目描述 思路 代码 3.二叉树的前序遍历 代码 思路 1.单值二叉树 965. 单值二叉树 - 力扣(LeetCod…

C#进行Web API开发时,遇到的常见问题

当使用C#进行Web API开发时,可能会遇到以下一些常见问题: 跨域请求 由于浏览器的同源策略限制,跨域请求可能会引发问题。解决方法可以使用CORS(跨域资源共享)来允许从特定的域名或端口访问你的API。 // 添加CORS中间…

influx v2 cli设置influxdb过期策略

目录 背景解法设置config设置buckets找到需要修改的bucket ID更新bucket保留策略 参考资料 背景 最近刚使用influxdb,需要对某个db设置一个过期策略。由于初次使用,对influx client命令行不熟悉,于是在网上找相关的教程,但是搜到…

pycharm社区版配置flask开发环境

新建配置文件,类型选择Shell Script 设置Execute中flask.exe的路径 设置options :--appflask_app.py run --port5000 --debug 设置working 路径 设置环境变量FLASK_APPflask_app.py;FLASK_ENVdevelopment 注意:FLASK_APPflask_app.py和上…

YOLOv8 损失函数改进 | 引入 Shape-IoU 考虑边框形状与尺度的度量

🗝️改进YOLOv8注意力系列一:结合ACmix、Biformer、BAM注意力机制 论文讲解加入代码本文提供了改进 YOLOv8注意力系列包含不同的注意力机制以及多种加入方式,在本文中具有完整的代码和包含多种更有效加入YOLOv8中的yaml结构,读者可以获取到注意力加入的代码和使用经验,总…

Android Studio 最新版本首次下载和安装以及汉化教程【+第二次安装使用教程】

🌟博主领域:嵌入式领域&人工智能&软件开发 前言:本教程详解首次安装和下载最新版本的Android Studio ,以及汉化教程。另外详解当第二次下载使用时解决遇到的问题。 目录 1.Android Studio 下载 2.Android Studio 首次…

【Unity】优化 if else 和 Switch Case

优化 if else 和 Switch Case z 大量的if else 和 Switch Case会造成代码冗余且消耗性能&#xff0c;可以借用如下方法优化 使用字典进行优化 方法优化&#xff1a; //注册字典&#xff0c;通过Action作为值&#xff0c;然后进行回调 private Dictionary<int, Action<Cha…

Hadoop之mapreduce参数大全-1

1.设置Map/Reduce任务允许使用的最大虚拟内存大小 mapred.task.maxvmem是MapReduce的一个配置参数&#xff0c;用于指定每个Map/Reduce任务允许使用的最大虚拟内存大小&#xff08;以字节为单位&#xff09;。如果一个任务使用的虚拟内存超过了此参数指定的值&#xff0c;则任…

【云计算】云计算概述

1. 云计算概述 1.1 云计算的定义 美国国家标准与技术研究院(NIST)定义 云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&#xff0c;进入可配置的计算资源共享池(资源包括网络&#xff0c;服务器&#xff0c;存储&#xff0c;应用软件…

Xmind - win10安装破解Xmind2023

Xmind - win10安装破解Xmind2023 1、下载 Xmind下载 提取码:we6i 2、安装 Step 1:双击运行 exe文件 Step 2:忽略最新版本 最近更新选择继续升级至Pro选择取消Step 4:直接选择同意授权

Java线程池最全详解

1. 引言 在当今高度并发的软件开发环境中&#xff0c;有效地管理线程是确保程序性能和稳定性的关键因素之一。Java线程池作为一种强大的并发工具&#xff0c;不仅能够提高任务执行的效率&#xff0c;还能有效地控制系统资源的使用。 本文将深入探讨Java线程池的原理、参数配置…

【python基础】一文搞懂:Python 中轻量型数据库 SQLite3 的用法

一文搞懂&#xff1a;Python 中轻量型数据库 SQLite3 的用法 文章目录 一文搞懂&#xff1a;Python 中轻量型数据库 SQLite3 的用法1 引言2 SQLite3 简介3 基本步骤4 示例代码4.1 连接数据库4.2 创建表4.3 插入数据4.4 查询数据4.5 更新/删除数据4.6 关闭数据库连接 5 实例演示…

java如何使用poi-tl在word文档里面渲染多张图片

1. Poi-tl官网 http://deepoove.com/poi-tl/ 2.引入依赖 <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version></dependency>3.编写Word图片模版 {{?pictures}}{{pictur…