浏览器标签/窗口之间的Javascript通信

Question

在同一浏览器的选项卡/窗口之间进行JavaScript通信的最可靠方法是什么？例如，当选项卡2开始播放音频时，选项卡1以某种方式知道这一点并可以暂停其播放器。

我正在建立一个带有音乐播放器的网站…因此，如果您现在打开该网站的两个标签，则可以同时在两者上播放音乐。这显然是不好的，所以我正在尝试寻找解决方案。

有任何想法吗？谢谢

Answer 1

这是一个旧的答案，我建议使用此处描述的现代版本：

Javascript;具有相同来源的选项卡/窗口之间的通信

您可以使用Cookie在浏览器窗口之间（以及选项卡之间）进行通信。

这是发送方和接收方的示例：

sender.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>