使用 JavaScript 的浏览器选项卡/窗口之间的通信 [英] Communication between browser tabs/windows using JavaScript
问题描述
让 JavaScript 在同一浏览器的选项卡/窗口之间进行通信的最可靠方式是什么?例如,当 Tab 2 开始播放音频时,Tab 1 以某种方式知道这一点并可以暂停其播放器.
What's the most reliable way to have JavaScript communicate between tabs/windows of the same browser? For example, when Tab 2 starts audio playback, Tab 1 somehow knows about this and can pause its player.
我正在构建一个带有音乐播放器的网站...所以目前如果您打开该网站的两个选项卡,您就可以在这两个标签上播放音乐.这显然很糟糕,所以我正在努力寻找解决方案.
I'm building a site with a music player... so at the moment if you open two tabs to the site, you could start music on both. This is obviously bad, so I'm trying to find a solution.
推荐答案
更新到现代解决方案,由于历史原因保留旧的解决方案.
Update to a modern solution, leaving the old one below for historical reasons.
您可以使用广播频道 API 来发送和接收消息https://developer.mozilla.org/en-US/docs/网络/API/Broadcast_Channel_API
You can use Broadcast Channel API to send and receive messages 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();
这是历史悠久的老方法,对于现代浏览器,请使用上述方法!
THIS IS HISTORICAL OLD WAY TO DO IT, USE THE METHOD ABOVE FOR MODERN BROWSERS!
您可以使用 cookie 在浏览器窗口(以及标签页)之间进行通信.
You can communicate between browser windows (and tabs too) using cookies.
以下是发送方和接收方的示例:
Here is an example of sender and receiver:
sender.html
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:
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>
这篇关于使用 JavaScript 的浏览器选项卡/窗口之间的通信的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!