[解決済み] JavaScriptを使ったブラウザのタブ/ウィンドウ間の通信 [重複]について

質問

同じブラウザのタブ/ウィンドウ間でJavaScriptの通信を行うための最も信頼性の高い方法は何でしょうか？たとえば、タブ 2 がオーディオ再生を開始すると、タブ 1 は何らかの方法でこれを把握し、プレーヤーを一時停止することができます。

音楽プレーヤーのあるサイトを作っているのですが、今のところ、サイトのタブを2つ開けば、両方で音楽を開始することができます。 これは明らかに悪いことなので、解決策を見つけようとしています。

解決方法は？

歴史的な理由から古いものを以下に残し、最新の解決策に更新してください。

Broadcast Channel API を使ってメッセージを送受信することができます。 https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');

// Example of sending of a very simple message
// It doesn't have to be a string, it could be a JS object
bc.postMessage('This is a test message.');

受信する場合

// A handler that only logs the event to the console:
bc.onmessage = function (ev) {
  console.log(ev);
}

と入力し、チャンネルを閉じます。

// Disconnect the channel
bc.close();

これは歴史的に古い方法です。モダンブラウザには上記の方法を使用してください。

Cookieを使用すると、ブラウザウィンドウ（タブも含む）間で通信することができます。

ここでは、送信側と受信側の例を示します。

送信者.html

<h1>Sender</h1>

<p>Type into the text box below and watch the text 
   appear automatically in the receiver.</p>

<form name="sender">
<input type="text" name="message" size="30" value="">
<input type="reset" value="Clean">
</form>

<script type="text/javascript"><!--
function setCookie(value) {
    document.cookie = "cookie-msg-test=" + value + "; path=/";
    return true;
}
function updateMessage() {
    var t = document.forms['sender'].elements['message'];
    setCookie(t.value);
    setTimeout(updateMessage, 100);
}
updateMessage();
//--></script>

receiver.html。

<h1>Receiver</h1>

<p>Watch the text appear in the text box below as you type it in the sender.</p>

<form name="receiver">
<input type="text" name="message" size="30" value="" readonly disabled>
</form>

<script type="text/javascript"><!--
function getCookie() {
    var cname = "cookie-msg-test=";
    var ca = document.cookie.split(';');
    for (var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(cname) == 0) {
            return c.substring(cname.length, c.length);
        }
    }
    return null;
}
function updateMessage() {
    var text = getCookie();
    document.forms['receiver'].elements['message'].value = text;
    setTimeout(updateMessage, 100);
}
updateMessage();
//--></script>