526互联

【前端开发】跨标签页广播通信教程，可方便新窗口修改原窗口实时更新

发布时间 2023-10-20 12:00:04作者: JeckHui

日常业务开发中我们常常会碰到如下的场景，即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。

 BroadcastChannel API 为我们提供了一种快捷且高效的途径

创建useTagMessage.ts文件

// 跨标签页通信方案 ‘Msg’即通道名称，可以是任何你想叫的名称
const broadCast = new BroadcastChannel('tagMessage');

export function sendMsg(type:string, content:string) {
  // 传入的内容必须是普通类型 象形式对象进行传输时请转换成普通类型
  broadCast.postMessage({
    type,
    content
  });
};

// 在监听获取方法内部我们需要多考虑一点关闭事件的方式，在空闲或者释放掉标签页面情况下不再执行监听
export function listenMsg(callback:Function) {
  const handler = (e:any) => {
    callback && callback(e.data);
  };
  broadCast.addEventListener('message', handler);
  // 在组件卸载后将监听时间关闭
  return () => {
    broadCast.removeEventListener('message', handler);
    broadCast.close();
  };
};

在页面组件中使用

发送消息标签页

import { sendMsg } from '@/utils/hooks/useTagMessage';

sendMsg('fly','dataInfo');

接受消息标签页

import { listenMsg } from '@/utils/hooks/useTagMessage';

const listenMsgVal = listenMsg((e)=> {
  console.log(e, 'listenMsgVal');
});