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监听能够正常使用