使用 JavaScript 的浏览器选项卡/窗口之间的通信

javascript browser

2022-08-30 02:59:39

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

我正在用音乐播放器构建一个网站...因此，目前，如果您打开网站的两个选项卡，则可以在两个选项卡上开始音乐。这显然很糟糕，所以我正试图找到一个解决方案。

答案 1

有关更现代的解决方案，请查看 https://stackoverflow.com/a/12514384/270274

报价：

我坚持使用问题中提到的共享本地数据解决方案。在可靠性，性能和浏览器兼容性方面，它似乎是最佳解决方案。localStorage

localStorage在所有现代浏览器中实现。

当其他选项卡对进行更改时，将触发该事件。这对于通信目的非常方便。storagelocalStorage

参考资料：
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

答案 2

更新到现代解决方案，由于历史原因，将旧解决方案保留在下面。

您可以使用广播频道 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>

接收器.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>