论坛 › 脚本开发 › BroadcastChannel同源多个标签之间通信

zgryyh 发表于 2025-2-10 17:55:07

BroadcastChannel同源多个标签之间通信

本帖最后由 zgryyh 于 2025-2-10 18:13 编辑

#### 初次发贴，如有不妥，还望海涵😃
#### 例子代码如下：
```
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2025-02-10
// @descriptiontry to take over the world!
// @author       wxb
// @match      https://cn.bing.com/*
// @match       *
// @icon         https://www.google.com/s2/favicons?sz=64&domain=csdn.net
// @connect      *
// @require      https://scriptcat.org/lib/513/2.0.0/ElementGetter.js
// @grant      GM_addStyle
// @grant      GM_xmlhttpRequest
// @grant      GM_openInTab
// @grant      GM_setValue
// @grant      GM_getValue
// @grant      GM_addValueChangeListener
// @run-at       document-end
// @grant      unsafeWindow
// @grant      window.close
// ==/UserScript==

(function() {
    /**
* 简单封装BroadcastChannel的用法
*/
    const Channel = {
      /**
   * BroadcastChannel对象
   */
      channel: null,

      /**
   * 实例化BroadcastChannel对象，赋值给channel变量
   * @param {*} channelName 通道名称，用以区分不同的通道
   * @returns
   */
      getChannel: (channelName) => {
            Channel.channel = new BroadcastChannel(channelName)
            return Channel.channel
      },

      /**
   * 发送消息
   * @param {*} object 消息体
   */
      send: (object) => {
            Channel.channel.postMessage(object)
      },

      /**
   * 发送消息，重载方法，可直接调用，省略对象实例化操作
   * @param {*} channelName 通道名称，用以区分不同的通道
   * @param {*} object 消息体
   */
      send: (channelName, object) => {
            if (Channel.channel == null) {
                Channel.channel = Channel.getChannel(channelName)
            }
            Channel.channel.postMessage(object)
      },

      /**
   * 监听消息
   * @param {*} callback 回调函数
   */
      listen: (callback) => {
            Channel.channel.onmessage = ({ data }) => {
                callback(data)
            }
      },

      /**
   * 监听消息，重载方法，可直接调用，省略对象实例化操作
   * @param {*} channelName 通道名称，用以区分不同的通道
   * @param {*} callback 回调函数
   */
      listen: (channelName, callback) => {
            if (Channel.channel == null) {
                Channel.channel = Channel.getChannel(channelName)
            }
            Channel.channel.onmessage = ({ data }) => {
                callback(data)
            }
      },

      /**
   * 通道关闭
   */
      close: () => {
            Channel.channel.close()
      },

      /**
   * 通道关闭，重载方法，可直接调用，省略对象实例化操作
   * @param {*} channelName 通道名称，用以区分不同的通道
   */
      close: (channelName) => {
            if (Channel.channel == null) {
                Channel.channel = Channel.getChannel(channelName)
            }
            Channel.channel.close()
      },

      /**
   * 通道枚举，定义业务中需要用到的所有通道名称枚举，可根据业务需求无限扩容
   */
      channelEnum: {
            TEST: { name: 'test', coment: '测试通道' },
            REAL_EVENT: { name: 'real_event', coment: '实时事项通道' },
      }
    }

    if(location.href=="https://cn.bing.com/"){
      Channel.listen(Channel.channelEnum.TEST.name, (data) => {
            alert(data);
      })

    }else{
      Channel.send(Channel.channelEnum.TEST.name, location.href)
    }



})();
```


这儿还有个DEMO：
[可以戳这里查看在线 Demo >>](https://alienzhou.github.io/broadcast-channel/)

李恒道 发表于 2025-2-10 17:57:03

哥哥可以把脚本发到https://scriptcat.org/zh-CN/
另外头像很智慧啊

zgryyh 发表于 2025-2-10 17:57:56

以上例子在必应的主页（https://cn.bing.com/）进行了监听，在搜索内容页进行了发消息。主页能接受到其它页面发送的消息。

zgryyh 发表于 2025-2-10 18:12:07

李恒道 发表于 2025-2-10 17:57
哥哥可以把脚本发到https://scriptcat.org/zh-CN/
另外头像很智慧啊

管理员谬赞，感谢指点。这只是个例子，用来学习还凑合，传到脚本列表上好像也不太合适{:4_97:}

李恒道 发表于 2025-2-10 20:25:05

zgryyh 发表于 2025-2-10 18:12
管理员谬赞，感谢指点。这只是个例子，用来学习还凑合，传到脚本列表上好像也不太合适 ...

没关系的
hhhh
我经常把自己乱七八糟的丢到脚本站
只要有用的东西就值得发

zgryyh 发表于 2025-2-11 00:41:52

李恒道 发表于 2025-2-10 20:25
没关系的
hhhh
我经常把自己乱七八糟的丢到脚本站


您在您家的地盘上，当然可以随便放，莫非我也可以？{:4_108:}

查看完整版本: BroadcastChannel同源多个标签之间通信