JavaScriptで同一サイトの2つのタブ(ページ)間で通信を行う方法

あるサイトでリンクをクリック時に別タブでページが開き、別タブ側のページで何らかのユーザー操作を行うと元タブのページでイベントが発火するという挙動を見かけ、これを試してみたく思った。いくつか実装方法はあるみたいだけどBroadcast Channel APIを使用するのが簡単そう。以下に実装方法をメモ。

やりたいこと

• ページA内のボタンをクリックするとページBにデータを送信
• ページBで受信できた場合、ページAに対して受信できた旨のメッセージを送信

実装方法

ページA

<button class="send_btn">send</button>

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>
//BroadcastChannelに接続
const channel_1 = new BroadcastChannel('channel_1');

//.send_btnクリック時
document.querySelector('.send_btn').addEventListener('click', function() {

    //送信用データ
    const data = {
        msg: 'ボタンがクリックされました。',
        send_ymd: dayjs().format('YYYY/MM/DD HH:mm:ss'),
    }

    //送信
    channel_1.postMessage({ type: 'BUTTON_CLICK', data: data });
});

//メッセージ受信時
channel_1.onmessage = (event) => {
    console.log(event.data);
};
</script>

ページB

<script>
//BroadcastChannelに接続
const channel_1 = new BroadcastChannel('channel_1');

//メッセージ受信時
channel_1.onmessage = (event) => {
    console.log(event.data);

    //メッセージ返信
    channel_1.postMessage({ type: 'RESPONSE', msg: '受信できました' });
};
</script>

注意点

送信用データについて

送信用データのkey / valueは自由に定義して良いカスタム文字列となる。typeのvalueは「INSERT / UPDATE / DELETEのいずれか」等、決まっている訳ではない(好きに決めて良い)点に注意。

ドメインについて

Broadcast Channel APIは同一ドメイン下で動作し、クロスドメインの場合は動作しない。

クロスドメインで何らかのデータを送信したい場合は過去記事を参考にwindow.postMessageでの実装を検討すること。

リファレンス

BroadcastChannel

https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

BroadcastChannel: message event

https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel/message_event

BroadcastChannel: postMessage() method

https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel/postMessage