网站首页JavaScript

使用BroadcastChannel(广播频道)实现跨页面通信

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>页面1</title>
</head>
<body>
<script type="text/javascript">
    // 创建BroadcastChannel对象
    let bc = new BroadcastChannel('broadcast_channel_name');

    // 接收消息
    bc.onmessage = function (event) {
        // 注意对消息来源进行判断
        if (event.origin === 'https://www.domain.com') {
            console.log('页面1收到广播：%s', event.data);
        }
    };

    // 发送消息
    bc.postMessage('孩儿立志出乡关');
</script>
</body>
</html>



<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>页面2</title>
</head>
<body>
<script type="text/javascript">
    // 创建BroadcastChannel对象
    let bc = new BroadcastChannel('broadcast_channel_name');

    // 接收消息
    bc.onmessage = function (event) {
        // 注意对消息来源进行判断
        if (event.origin === 'https://www.domain.com') {
            console.log('页面2收到广播：%s', event.data);
        }
    };

    // 发送消息
    bc.postMessage('学不成名誓不还');

    //========== 总结 ==========//
    // 1、BroadcastChannel通信是双向的，也就是可以发送消息，也可以接收消息。
    // 2、BroadcastChannel有同源限制，即必须同协议、同域名、同端口。
    // 3、BroadcastChannel使用频率并不高，典型使用场景就是电商网站打开了多个商品页面，在其中一个商品页面里将商品加入了购物车，
    //    其它页面也应该更新购物车状态，这时就可以使用BroadcastChannel。
</script>
</body>
</html>

Copyright © 2024 码农人生. All Rights Reserved