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

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

javascript browser

浏览器选项卡/窗口之间的Javascript通信,javascript,browser,Javascript,Browser,让Javascript在同一浏览器的选项卡/窗口之间进行通信的最可靠的方法是什么？例如，当Tab 2启动音频播放时，Tab 1不知何故知道这一点，并可以暂停其播放器我正在用音乐播放器建立一个网站。。。所以现在如果你打开两个标签，你就可以在两个标签上都开始播放音乐。这显然很糟糕，所以我正试图找到一个解决办法有什么想法吗？谢谢这是一个古老的答案，我建议使用这里描述的现代版本：您可以使用cookie在浏览器窗口（以及选项卡）之间进行通信以下是发送方和接收方的示例： sender.htm

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

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

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

var w2 = window.open(...)

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

编辑：

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

查看更现代化的解决方案

引述：

我坚持使用

localStorage

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

localStorage

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

当其他选项卡对

localStorage

进行更改时，

storage

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

参考资料：

即使在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});
};

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

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

创建和更新子窗口：

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

下面的窗口（w1）打开另一个窗口（w2）。任何窗口都可以向另一个窗口发送/接收消息。因此，理想情况下，我们应该验证消息来自我们打开的窗口（w2）

在w1

在w2中（abc.do）

还有一种实验性的技术，名为，专门为具有相同来源的不同浏览器上下文之间的通信而设计。您可以向其他浏览器上下文发布消息和从其他浏览器上下文接收消息，而无需对其进行引用：

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

显然，这是一种体验式技术，目前还不支持所有浏览器。

自动播放音频是不好的。为什么不让用户点击一个“播放”按钮，并在遇到这种情况时手动暂停另一个选项卡？没有自动播放功能。但如果用户不必手动暂停另一个选项卡，那就太好了。Youtube就是这样做的（比如用flash）+1个好问题，我正在我的网站聊天应用程序中解决这个问题。5年后仍然有用。我也想到了类似的方法，但希望找到比cookies/setTimeout更好的解决方案。然而，这可能只是唯一的解决方案。ThxDon不能将字符串传递给

setTimeout

-这样做是在使用

eval

。相反，使用

setTimeout（updateMessage，100）直接传递函数。

我还建议使用

setInterval（）

我在IE11上有本地存储问题，请参阅本文（我面对第3点），这样cockie解决方案会更好（至少对于IE）。我还尝试禁用cockies，但它仍然有效（这是在IE11、IE10、IE9上）。TomášZato，请注意，答案是从2010年开始的——当时并非所有浏览器都支持HTML5，IE6和IE7的份额相当高。现在有更好的解决方案。使用COOKIES？吃了它们，尽情享受吧！有一个更简单的方法！只需访问另一个窗口的var。在w1中获得一个值var，请从w2 whit window.opener.value访问它！假设用户将它们全部打开。在这种情况下，有没有类似的解决方案？大家都知道，正如@Ferdinak所说的，这个答案是错误的。您没有对用户打开的选项卡的引用。有趣与否无关。这首先是一个问答网站。人们来到这个页面来寻找提问者问题的答案。如果你想分享一些有趣的东西，你应该考虑写一个新的wiki风格的问题。@ JONAS.NIJA IMO，问题不清楚100%是如何打开标签，所以这是一个完全有效的答案，即使它不是一个通用的。问题不是关于Flash。这在大多数移动情况下是行不通的。公平地说，Flash运行“一种形式”。Javascript，正如OP requestedpostMessage API不是设计的一样

window.opener.postMessage("Hi! I'm w2", "*");

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