让 JavaScript 在同一浏览器的选项卡/窗口之间进行通信的最可靠方法是什么?例如,当 Tab 2 开始播放音频时,Tab 1 以某种方式知道这一点并可以暂停其播放器。
我正在建立一个带有音乐播放器的网站......所以目前如果你打开该网站的两个标签,你可以在两个标签上开始播放音乐。这显然很糟糕,所以我正在努力寻找解决方案。
更新到现代解决方案,出于历史原因将旧解决方案留在下面。
您可以使用广播频道 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>