BroadcastChannel同源多个标签之间通信

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

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

初次发贴，如有不妥，还望海涵😃

例子代码如下：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2025-02-10
// @description  try 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 >>