js 同源跨标签广播通信

话不多说直接上代码…

//BrowserChannel.js

/**
 * 作者：superzuo
 * 时间：2023/03/03 11:18:08
 * 功能：同源跨标签广播通信
 */
/* 定义mode来判断和通信 */
const MODE = {
    /* 通过工具关闭 */
    "tools-closeWin":"tools-closeWin",
    /* iportal 登录成功 */
    "user-login":"user-login",
    /* 工具申请提交 */
    "tools-applyFor":"tools-applyFor"
}

class BrowserChannel {
    constructor(name,mark) {
        this.Channel = new BroadcastChannel(name);
        this.Channel.id = this.creatId(name);
        this.mark = mark;
        this.MODE = MODE;
        /* 创建列表保存监听者 */
        this.Channel.listeners = new Set();
        /* 内容初始化 */
        this.ints()
    }

    ints() {
        /* 我是当前标签打开者，需要首次广播 */
        this.sendMsg({
            type: 1,
            text: "我来了！"
        });
        window.addEventListener("unload", () => {
            this.sendMsg({
                type: 0,
                text: "我走了！"
            });
        })
        /* 监听广播数据 */
        this.Channel.addEventListener("message", e => {
            let msg = e.data.msg;
            /* 有新标签来了 */
            if (msg.type === 1) {
                this.sendMsg({
                    type: 2,
                    text: "我收到了！"
                });
                this.Channel.listeners.add({
                    id:e.data.id,
                    mark:e.data.mark
                });
            } else if (msg.type === 2) {
                this.Channel.listeners.add({
                    id:e.data.id,
                    mark:e.data.mark
                });
            } else if (msg.type === 0) {
                this.Channel.listeners.delete({
                    id:e.data.id,
                    mark:e.data.mark
                });
            }
        })
    }

    /* 创建标签id标识监听者 */
    creatId(name) {
        const key = `Iportal-Channel-${name}`
        let id = +localStorage.getItem(key);
        if (!id) {
            id = 0;
        }
        id++;
        localStorage.setItem(key, id.toString());
        return id;
    }

    sendMsg(msg) {
        this.Channel.postMessage({
            id: this.Channel.id,
            mark:this.mark,
            msg
        })
    }

}

export default BrowserChannel;

//在main.js 加载
import BrowserChannel from "@/utils/BroadcastChannel";


/* 同源跨标签广播通信,主要用于赋能工具通信 */
let $BrowserChannel = new BrowserChannel("MyTools","MyMark");
Vue.prototype.$BrowserChannel = $BrowserChannel;
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/* 监听窗口来关闭当前已打开窗口 */
$BrowserChannel.Channel.addEventListener("message",e=>{
    let msg = e.data.msg;
    /* 在未登录的情况下关闭当前iportal，然后重新打开 */
    if(!!msg.mode && msg.mode === $BrowserChannel.MODE["tools-closeWin"]){
        //相当于window.close()操作
        Utility.closeWinPage();
    }
})

//其他地方应用
this.$BrowserChannel.Channel.addEventListener("message", e => {
      let msg = e.data.msg;
      /* 监听用户登录 */
      if (!!msg.mode && msg.mode === this.$BrowserChannel.MODE['user-login']) {
        //登录了获取用户信息
        !!msg.success && this.getUserInfo();
      }
})

//发送广播消息
 this.$BrowserChannel.sendMsg({
     mode: this.$BrowserChannel.MODE['tools-applyFor']
 })