这些开源项目，把浏览器多窗口玩出花了！

CUGGZ 前端充电宝 2023-12-28

本文由「前端充电宝」出品，转载请注明出处（微信公众号：前端充电宝）

前两天一个“量子纠缠”效果火遍前端圈，作者借助 localstorage 实现了惊人的多窗口交互。

很快就出现了很多类似的开源项目，使用不通的方式实现浏览器多窗口交互，本文就来分享一下相关的有趣项目！

tldraw

tldraw 是一个协作式数字白板，可以在 tldraw.com 上使用。其编辑器、用户界面和其他底层库都是开源的。tldraw 支持浏览器多窗口之间数据同步，并且延迟非常低，甚至支持在不用浏览器之间实现同步。

尝试：https://examples-git-floaty-example-tldraw.vercel.app/floaty-window

Github： https://github.com/tldraw/tldraw

“量子纠缠”效果作者开源的一个简化版，使用 localstorage 实现多窗口数据同步效果。

Github：https://github.com/bgstaal/multipleWindow3dScene

该项目使用 Threejs 和 localstorage 实现。

Github：https://github.com/Akohjesse/mutli-browser-window-threejs

使用 localstorage 实现多窗口数据同步，不同浏览器窗口可以看到拼接起来的视频。

Github：https://github.com/wesbos/hot-tips/tree/main/fun-windows

一个使用 Socket.IO 实现的浏览器多窗口交互的小游戏。

Github：https://github.com/chigozienri/browser-bounce/

AcrossTabs 是一个轻松实现跨源浏览器选项卡之间通信的工具库，使用PostMessageAPI进行通信。

AcrossTabs 具有以下特性：

安全地在不同的浏览器标签页面之间启用了跨源通信。它使用 PostMessage API 进行通信。
它可以轻松地在不同系统上挂接自定义回调函数，例如：在接收到来自标签页的消息时，在子标签页中执行自定义方法。
可以在目标链接/按钮上提供 data-tab-opener="name" 属性（用于打开新标签页），以便在子标签页发起握手并被父标签页接收之前，取消该链接/按钮。
提供了完整的 API 来获取有关标签页（父标签页和子标签页）的信息以及其他与通信相关的方法。
以 UMD 格式导出，即库可以在任何地方使用。
压缩后仅约 4 KB 大小。

Github：https://github.com/wingify/across-tabs