让 JavaScript 在同一浏览器的选项卡/窗口之间进行通信的最可靠方法是什么？例如，当 Tab 2 开始播放音频时，Tab 1 以某种方式知道这一点并可以暂停其播放器。
我正在建立一个带有音乐播放器的网站...所以目前如果您打开该网站的两个标签页，您可以同时在这两个标签页上播放音乐。 这显然很糟糕，所以我正在努力寻找解决方案。
【问题讨论】：
标签： javascript browser
如需更现代的解决方案，请查看https://stackoverflow.com/a/12514384/270274
引用：
我坚持使用
localStorage问题中提到的共享本地数据解决方案。就可靠性、性能和浏览器兼容性而言，它似乎是最佳解决方案。
localStorage在所有现代浏览器中都实现了。
storage事件在 other 选项卡更改localStorage时触发。这对于交流来说非常方便。参考：
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event
【讨论】：
更新到现代解决方案，出于历史原因将旧解决方案留在下面。
您可以使用广播频道 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>
【讨论】：
setTimeout - 你这样做是在使用eval。相反，直接使用setTimeout(updateMessage, 100) 传递函数
setInterval()
还有一种名为Broadcast Channel API 的实验性技术，专为具有相同来源的不同浏览器上下文之间的通信而设计。您可以向另一个浏览器上下文发布消息并从另一个浏览器上下文接收消息，而无需对其进行引用：
var channel = new BroadcastChannel("foo");
channel.onmessage = function( e ) {
// Process messages from other contexts.
};
// Send message to other listening contexts.
channel.postMessage({ value: 42, type: "bar"});
显然，这是一种体验式技术，尚不支持所有浏览器。
【讨论】：
?）
我认为您不需要 cookie。每个文档的 JavaScript 代码都可以访问其他文档元素。因此您可以直接使用它们来共享数据。
您的第一个窗口 w1 打开 w2 并保存参考
var w2 = window.open(...)
在 w2 中，您可以使用 window 的 opener 属性访问 w1。
【讨论】：
您可以通过本地存储 API 执行此操作。请注意，这只适用于两个选项卡之间。您不能将发送者和接收者放在同一页面上：
在发件人页面上：
localStorage.setItem("someKey", "someValue");
在接收者页面上：
$(document).ready(function () {
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(evt) {
alert("storage event called key: " + evt.key);
}
});
【讨论】：
在窗口（w1）下方打开另一个窗口（w2）。任何窗口都可以向/从另一个窗口发送/接收消息。因此，理想情况下，我们应该验证消息是否来自我们打开的窗口（w2）。
在 w1
var w2 = window.open("abc.do");
window.addEventListener("message", function(event){
console.log(event.data);
});
在 w2(abc.do) 中
window.opener.postMessage("Hi! I'm w2", "*");
【讨论】：
如果文档来源相同，甚至在 HTML5 之前就支持不同 JavaScript 执行上下文之间的通信。
如果没有，或者您没有引用其他 Window 对象，那么您可以使用 HTML5 引入的新 postMessage API。我在this Stack Overflow answer 中详细阐述了这两种方法。
【讨论】：
如果窗口具有子父关系，您可以在窗口（选项卡式或非选项卡式）之间进行通信。
创建和更新子窗口：
<html>
<head>
<title>Cross window test script</title>
<script>
var i = 0;
function open_and_run() {
var w2 = window.open("", "winCounter");
var myVar=setInterval(function(){myTimer(w2)},1000);
}
function myTimer(w2) {
i++;
w2.document.body.innerHTML="<center><h1>" + i + "</h1><p></center>";
}
</script>
</head>
<body>
Click to open a new window
<button onclick="open_and_run();">Test This!</button>
</body>
</html>
子窗口可以使用parent 对象与生成它的父窗口进行通信，因此您可以从任一窗口控制音乐播放器。
【讨论】：
我发现了一种使用 HTML5 本地存储的不同方式。我创建了一个包含 API 等事件的库：
sysend.on('foo', function(message) {
console.log(message);
});
var input = document.getElementsByTagName('input')[0];
document.getElementsByTagName('button')[0].onclick = function() {
sysend.broadcast('foo', {message: input.value});
};
https://github.com/jcubic/sysend.js
它将消息发送到所有其他页面，但不会发送到当前页面。
编辑：
最新版本的库也支持广播通道通信，但在只支持本地存储的 IE11 中仍然有效。它还支持跨域通信（不同域），但需要一点代码。
最新的 API 还支持在同一页面上执行事件的 emit 函数。
即使是最新版本，也支持管理窗口，向特定窗口发送消息或获取窗口/标签列表。
【讨论】：
使用 Flash，您可以在任何窗口、任何浏览器之间进行通信（是的，在运行时从 Firefox 到 Internet Explorer）...任何形式的 Flash 实例（@ 987654321@ 或 ActiveX)。
【讨论】：