记录--浏览器跨标签星球火了，简单探究一下实现原理

2023-11-27 18:24 由林恒发表于 #前端开发

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

一、前言

最近推特上一位懂设计和写代码的大神一个两个浏览器之间星球粒子交互的动画火了，让人看了大呼脑洞大开，浏览器竟然还能这么玩！！！

准备自己也搞搞玩一下

二、实现

原作者的粒子动画非常炫酷，但是不是我们本文重点，我们通过一个元素在不同窗口的拖拽实现一个可以变幻的例子来学习一下原理，后续在实现一个稍微复杂的多窗口的小游戏。关于粒子动画的内容，有兴趣的小伙伴可以自己实现

其实实现类似的功能需要的难点并不多，不在乎以下几个步骤

1、屏幕坐标和窗口坐标转换
2、跨标签通讯

1、先来看第一个点，获取屏幕坐标与窗口坐标

// 屏幕坐标转换为窗口坐标
const screenToClient = (screenX, screenY) => {
  const clienX = screenX - window.screenX;
  const clienY = screenY - window.screenY - barHeight();
  return [clienX, clienY];
};

// 窗口坐标转换为屏幕坐标
const clientToScreen = (clienX, clienY) => {
  const screenX = clienX + window.screenX;
  const screenY = clienY + window.screenY + barHeight();
  return [screenX, screenY];
};

我们先简单实现一个卡片，通过url上面传递颜色值，设置定位

在卡片本上设置上点击拖动等事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨标签通讯</title>
  </head>
  <style>
    .card {
      width: 300px;
      height: 300px;
      background-color: #f00;
      position: fixed;
      top: 100px;
      left: 100px;
    }
  </style>
  <body>
    跨标签通讯
    <div class="card">card</div>
  </body>
  <script>
    const barHeight = () => window.outerHeight - window.innerHeight;
    const cardDom = document.querySelector(".card");
    cardDom.style.top = 100 + "px";
    cardDom.style.left = 100 + "px";
    cardDom.style.background =
      new URLSearchParams(window.location.search).get("color") || "red";

    window.onload = function () {
      cardDom.onmousedown = function (e) {
        cardDom.style.cursor = "pointer";
        let x = e.pageX - cardDom.offsetLeft;
        let y = e.pageY - cardDom.offsetTop;
        window.onmousemove = function (e) {
          cardDom.style.left = e.clientX - x + "px";
          cardDom.style.top = e.clientY - y + "px";
          // 发送消息
          const clientCoordinateX = e.clientX - x;
          const clientCoordinateY = e.clientY - y;
          const ScreenCoordinate = clientToScreen(
            clientCoordinateX,
            clientCoordinateY
          );
          sendMessage(ScreenCoordinate);
        };
        window.onmouseup = function () {
          window.onmousemove = null;
          window.onmouseup = null;
          cardDom.style.cursor = "unset";
        };
      };
    };
  </script>
</html>

2、跨标签传输

单个元素的拖动就实现了，很简单，如何让其他标签的元素也能同步进行，需要实现跨标签方案了，可以参考该文章- 跨标签页通信的8种方式

我们就选择第一种，使用 BroadCast Channel，使用也很简单

// 创建 Broadcast Channel
const channel = new BroadcastChannel("myChannel");
// 监听消息
channel.onmessage = (event) => {
  // 处理接收到的消息
  console.log('接收',event)
};
// 发送消息
const sendMessage = (message) => {
  channel.postMessage(message);
};

只需要在移动时发送消息，再其他标签页就可以接收到值了，现在关键的就是收到发送的坐标点后，如何处理，其实关键就是要让几个窗口的卡片位置转化到同一个纬度，让其再超出浏览器的时候，再另一个窗口的同一个位置出现，所以就需要将窗口坐标转化成屏幕坐标，发送给其他窗口后，再转化成窗口坐标进行渲染即可

// 鼠标移动发送消息的时候，窗口坐标转化成屏幕坐标
window.onmousemove = function (e) {
  cardDom.style.left = e.clientX - x + "px";
  cardDom.style.top = e.clientY - y + "px";
  const clientCoordinateX = e.clientX - x;
  const clientCoordinateY = e.clientY - y;
  const ScreenCoordinate = clientToScreen(
    clientCoordinateX,
    clientCoordinateY
  );
sendMessage(ScreenCoordinate);
  
// 接收消息的时候，屏幕坐标转化成窗口坐标 
channel.onmessage = (event) => {
  // 处理接收到的消息
  const [clienX, clienY] = screenToClient(...event.data);
  // 不同窗口的卡片要在同一个位置， 要放到同一个坐标系下面，保持屏幕坐标一致
  cardDom.style.left = clienX + "px";
  cardDom.style.top = clienY + "px";
};

完整代码，在最下面

三、总结

本文通过移动一个简单的图形，在不同浏览器之间穿梭变换，初步体验了多个浏览器之间如何进行交互，通过拖拽元素，通过跨标签的通讯，将当前窗口元素的位置进行发送，另一个窗口进行实时接收，然后通过屏幕坐标和窗口坐标进行转换，就能实现，从一个浏览器拖动到另一个浏览器时，变化元素颜色的功能了，当然变化背景色只是举例子，你也可以变化扑克牌，变化照片，这样看起来像变魔术一样，非常神奇，看似浏览器不同标签之间没有联系，当以这种方式产生联系后，就会产生很多不可思议的神奇事情。就像国外大神的多标签页的两个星球粒子，产生吸引融合的效果。原理其实是一样的。

后续前瞻

在通过小demo的学习，知道多浏览器的玩法后，接下来的我们会实现一个更有意思的小游戏，通过浏览器化身一个小木棒，接小球游戏，先看一下 gif，接下来的文章会写具体实现

传送门 👇 多标签通讯--实现用浏览器接小球游戏

完整代码实现如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨标签通讯</title>
  </head>
  <style>
    .card {
      width: 300px;
      height: 300px;
      background-color: #f00;
      position: fixed;
      top: 100px;
      left: 100px;
    }
  </style>
  <body>
    跨标签通讯
    <div class="card">card</div>
  </body>
  <script>
    const barHeight = () => window.outerHeight - window.innerHeight;
    const cardDom = document.querySelector(".card");
    cardDom.style.top = 100 + "px";
    cardDom.style.left = 100 + "px";
    cardDom.style.background =
      new URLSearchParams(window.location.search).get("color") || "red";

    // 屏幕坐标转换为窗口坐标
    const screenToClient = (screenX, screenY) => {
      const clienX = screenX - window.screenX;
      const clienY = screenY - window.screenY - barHeight();
      return [clienX, clienY];
    };

    // 窗口坐标转换为屏幕坐标
    const clientToScreen = (clienX, clienY) => {
      const screenX = clienX + window.screenX;
      const screenY = clienY + window.screenY + barHeight();
      return [screenX, screenY];
    };

    // 创建 Broadcast Channel
    const channel = new BroadcastChannel("myChannel");
    // 监听消息
    channel.onmessage = (event) => {
      // 处理接收到的消息
      const [clienX, clienY] = screenToClient(...event.data);
      // 不同窗口的卡片要在同一个位置， 要放到同一个坐标系下面，保持屏幕坐标一致
      cardDom.style.left = clienX + "px";
      cardDom.style.top = clienY + "px";
    };

    // 发送消息
    const sendMessage = (message) => {
      channel.postMessage(message);
    };

    window.onload = function () {
      cardDom.onmousedown = function (e) {
        cardDom.style.cursor = "pointer";
        let x = e.pageX - cardDom.offsetLeft;
        let y = e.pageY - cardDom.offsetTop;
        window.onmousemove = function (e) {
          cardDom.style.left = e.clientX - x + "px";
          cardDom.style.top = e.clientY - y + "px";
          // 发送消息
          const clientCoordinateX = e.clientX - x;
          const clientCoordinateY = e.clientY - y;
          const ScreenCoordinate = clientToScreen(
            clientCoordinateX,
            clientCoordinateY
          );
          sendMessage(ScreenCoordinate);
        };
        window.onmouseup = function () {
          window.onmousemove = null;
          window.onmouseup = null;
          cardDom.style.cursor = "unset";
        };
      };
    };
  </script>
</html>

本文转载于:

https://juejin.cn/post/7304598711992598566

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。