浏览器选项卡/窗口之间的Javascript通信

让Javascript在同一浏览器的选项卡/窗口之间进行通信的最可靠的方法是什么？例如，当Tab 2启动音频播放时，Tab 1不知何故知道这一点，并可以暂停其播放器

我正在用音乐播放器建立一个网站。。。所以现在如果你打开两个标签，你就可以在两个标签上都开始播放音乐。 这显然很糟糕，所以我正试图找到一个解决办法

有什么想法吗？

---

谢谢

这是一个古老的答案，我建议使用这里描述的现代版本：

---

---

您可以使用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>

接收机
在“发件人”中键入文本时，请注意文本出现在下面的文本框中

这是一个古老的答案，我建议使用这里描述的现代版本：

---

---

您可以使用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>

接收机
在“发件人”中键入文本时，请注意文本出现在下面的文本框中

我想你不需要饼干。每个文档的js代码都可以访问其他文档元素。因此，您可以直接使用它们来共享数据。 第一个窗口w1打开w2并保存引用

var w2 = window.open(...) 

---

在w2中，您可以使用window的opener属性访问w1。

我认为您不需要cookies。每个文档的js代码都可以访问其他文档元素。因此，您可以直接使用它们来共享数据。 第一个窗口w1打开w2并保存引用

var w2 = window.open(...) 

在w2中，您可以使用window的opener属性访问w1。

编辑： 使用Flash，您可以在任何窗口、任何浏览器（是的，运行时从FF到IE）…任何形式的Flash实例（ShockWave/activeX）之间进行通信。

编辑：

---

使用Flash，您可以在任何窗口、任何浏览器（是的，在运行时从FF到IE）…任何形式的Flash实例（ShockWave/activeX）

查看更现代化的解决方案

引述：

我坚持使用

localStorage

使用问题中提到的共享本地数据解决方案。就可靠性、性能和浏览器兼容性而言，它似乎是最好的解决方案

localStorage

在所有现代浏览器中都实现

当其他选项卡对

localStorage

进行更改时，

storage

事件将触发。这对于通信目的来说非常方便

参考资料：

---

有关更现代的解决方案，请查看

引述：

我坚持使用

localStorage

使用问题中提到的共享本地数据解决方案。就可靠性、性能和浏览器兼容性而言，它似乎是最好的解决方案

localStorage

在所有现代浏览器中都实现

当其他选项卡对

localStorage

进行更改时，

storage

事件将触发。这对于通信目的来说非常方便

参考资料：

---

即使在HTML5之前，如果文档来源相同，也支持在不同的JavaScript执行上下文之间进行通信。如果没有或您没有引用其他

窗口

对象，那么您可以使用HTML5引入的新postMessage API。在这篇文章中，我详细阐述了这两种方法。

即使在HTML5之前，如果文档来源相同，也支持在不同的JavaScript执行上下文之间进行通信。如果没有或您没有引用其他

窗口

对象，那么您可以使用HTML5引入的新postMessage API。在这篇文章中，我详细阐述了这两种方法。

发现了使用HTML5 localstorage的不同方法，我创建了一个包含以下事件的库：

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});
};

---

它会将消息发送到所有其他页面，但不会发送到当前页面。

使用HTML5 localstorage找到了不同的方法，我创建了一个包含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});
};

---

它将向所有其他页面发送消息，但不会向当前页面发送消息。

如果窗口（选项卡式或非选项卡式）具有子-父关系，则可以在它们之间进行通信

创建和更新子窗口：

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

跨窗口测试脚本
var i=0；
函数打开和运行（）{
var w2=窗口打开（“，“winCounter”）；
var myVar=setInterval（函数（）{myTimer（w2）}，1000）；
}
函数myTimer（w2）{
i++；
w2.document.body.innerHTML=“+i+””；
}
单击以打开一个新窗口
试试这个！

子窗口可以使用

parent

对象与生成它的父窗口通信，因此您可以从任一窗口控制音乐播放器

---

请参见此处的操作：

如果窗口之间存在子-父关系，则可以在它们之间进行通信（无论是否使用选项卡）

创建和更新子窗口：

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

跨窗口测试脚本
var i=0；
函数打开和运行（）{
var w2=窗口打开（“，“winCounter”）；
var myVar=setInterval（函数（）{myTimer（w2）}，1000）；
}
函数myTimer（w2）{
i++；
w2.document.body.innerHTML=“+i+””；
}
单击以打开一个新窗口
试试这个！

子窗口可以使用

parent

对象与生成它的父窗口通信，因此您可以从任一窗口控制音乐播放器

---

请参见此处的操作：

您可以通过本地存储API执行此操作。请注意，这仅在两个选项卡之间起作用。您不能将发件人和收件人放在同一页上：

在发件人页面上：

localStorage.setItem("someKey", "someValue");

在接收器页面上

    $(document).ready(function () {

        window.addEventListener('storage', storageEventHandler, false);

        function storageEventHandler(evt) {
            alert("storage event called key: " + evt.key);
        }
    });

---

您可以通过本地存储API执行此操作。请注意，这仅在两个选项卡之间起作用。您不能同时将发送方和接收方置于s上