前端实现两个页面之间的通讯

成小白2025-08-20 14:12

前言

公司项目的新增和修改都是以打开新页面的方式实现，为啥这样还是因为领导说弹出框的形式看都看吐了。唉！！！！！！！！！！！

实现思路

使用的是 BroadcastChannel API
封装了一个简单的BroadcastChannel类

BroadcastChannel API的基本使用

BroadcastChannel API 允许同一源（origin）下的不同浏览上下文（如不同标签页、 iframe** 等）之间进行实时消息通信。

创建频道

js 复制代码

let channelNameId = new BroadChannel(频道名)

传递数据

js 复制代码

channelNameId.onmessage=onmessage = (e) => {
       console.log('监听传递的数据');    
}

发送消息

js 复制代码

channelNameId.postMessage(1)

关闭通讯

js 复制代码

channelNameId.close()

代码实现

js 复制代码

/**
 * 可多个频道使用
 * 
 *  使用方法：  
 *   import {BroadChannel}  from '@/mixins/moreChannel.js'
 * 
 *   new BroadChannel(频道名)  
 *   new BroadChannel(频道名,回调)  回调可选
 *   let channel = new BroadChannel('channelName',(e)=>{ console.log(e)})
 *   channel.sendChannel('发送消息')
 */

export class BroadChannel {
    constructor(name, callback) {
        this.channelNameId = null
        this.createChannel(name, callback)
        window.addEventListener('beforeunload', () => {
            this.closeChannel();
        });
    }
    // 创建广播通道
    createChannel(name, callback) {
        this.channelNameId = new BroadcastChannel(name)
        if (callback && typeof callback === 'function') {
            this.onChannel(callback)
        }
    }
    // 发送消息
    sendChannel(data) {
        this.channelNameId.postMessage(data)
    }
    // 监听消息
    onChannel(callback) {
        this.channelNameId.onmessage = (e) => {
            callback(e.data)
        }
    }
    // 关闭广播通道
    closeChannel() {
        this.channelNameId.close()
        this.channelNameId = null
    }
}