Component

跨源组件通信

https://blog.means88.com/react-isolation/

Browser

通信

同一页面下内容的相互通信
使用场景:

  • 独立的组件间通信;
  • iframe/主页面间通信;
  • 与第三方通信;

同源:https://developer.mozilla.org/zh-CN/docs/Web/API/BroadcastChannel

BroadcastChannel 接口代理了一个命名频道,可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口,Tab页,frame或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件,消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

不同源:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

跨页
postMessage
storage:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/storage_event
但都是同域名,同端口,同协议,也就是同样的地址,只是浏览器标签页不同。