BroadcastChannel的onmessage事件为何从未触发？

问题代码回顾 #

核心逻辑代码：

const channel = new BroadcastChannel('foobar')

if (channel) {
  channel.onmessage = onMessage
}

export async function onMessage(event: MessageEvent) {
  alert('onMessage') // 从未触发
}

export function post(message: Message) {
  alert('post') // 此处正常执行
  channel?.postMessage(message)
}

外部调用代码：

import * as BroadcastChannel from '@/utils/broadcastChannel/core'

BroadcastChannel.post('test')

根本原因 #

你已经明确了关键误解：BroadcastChannel API 仅用于跨同源的不同浏览上下文（标签页、窗口、独立iframe）之间传递消息，同一标签页内发送的消息不会被自身的onmessage监听捕获——这是API的设计逻辑，并非代码书写错误。

对应解决方式 #

• 若需跨标签页/窗口通信：打开两个同源的应用实例（比如两个标签页），在其中一个调用post方法，另一个标签页即可触发onmessage回调并弹出提示。
• 若需同一标签页内的消息传递：改用自定义事件（CustomEvent）或发布订阅模式替代，示例如下：

// 自定义事件实现同一上下文内的消息通信
// 监听自定义事件
window.addEventListener('app-message', (event) => {
  alert('onMessage: ' + event.detail)
})

// 发送自定义事件
export function post(message: Message) {
  alert('post')
  window.dispatchEvent(new CustomEvent('app-message', { detail: message }))
}

内容的提问来源于stack exchange，提问作者van_folmert