浏览器页签间通信

多个浏览器页签之间如何进行消息通信

1. 何时使用

传递当前页签的数据到其他页签。

2. 如何使用

import { broadcast } from "nc-lightapp-front";

3. 能力特性

注意 事件绑定了一定要注销避免内存泄露。

import React, { Component } from 'react';
import './broadcastChannelA.less';

import { broadcast, base } from 'nc-lightapp-front';

const { NCButton } = base;

class broadcastChannelA extends Component {
    componentWillMount() {
        broadcast.on('TabBroadcast', (obj, key) => {
            console.log(obj, key);
            let arr = [];
            // console.log(obj);
            // 注意  这个条件一定要有  这个事件触发是很频繁的  所有的非本页面ajax都会触发 没有条件或许会导致多次刷新
            if (obj && obj.url && arr.indexOf(obj.url) !== -1) {
                // TODO
            }
        });
        window.broadcast = broadcast;
    }

    onClick() {
        broadcast.broadcast('TabBroadcast', new Date().getTime());
    }

    render() {
        return (
            <div>
                这是一个broadcastChannel的示例
                <NCButton onClick={this.onClick}>点击发送消息</NCButton>
            </div>
        );
    }

    componentWillUnmount() {
        broadcast.off('TabBroadcast');
    }
}
export default broadcastChannelA;

4. API

4.1 broadcast

调用样例 : broadcast.broadcast(eventName, message)
说明 : 发送消息的方法
参数说明:

返回值说明 ： 返回 undefined

4.2 on

调用样例 : broadcast.on(eventName, fn, unique, newBind)
说明 : 消息事件绑定
参数说明:

返回值说明 ： 返回 undefined

4.3 off

调用样例 : broadcast.off(eventName, fn)
说明 : 消息事件注销
参数说明:

返回值说明 ： 返回 undefined

4.4 offAll

调用样例 : broadcast.offAll
说明 : 消息事件注销所有
参数说明: 无
返回值说明 ： 返回 undefined