232

我正在寻找一种方法，如何在浏览器中的多个选项卡或窗口之间进行通信（在同一个域上，而不是CORS上）而不留下痕迹。有几种解决方案：

  1. 使用窗口对象
  2. 留言
  3. 饼干
  4. 本地存储

第一个可能是最糟糕的解决方案 - 您需要从当前窗口打开一个窗口，然后您只能在保持窗口打开的情况下进行通信。如果您在任何窗口中重新加载页面，您很可能会丢失通信。

第二种方法，使用 postMessage，可能会启用跨域通信，但它遇到与第一种方法相同的问题。您需要维护一个窗口对象。

第三种方式，使用 cookie，在浏览器中存储一些数据，这可以有效地看起来像向同一域上的所有窗口发送消息，但问题是您永远无法知道所有选项卡是否已经读取“消息”在清理之前。您必须实施某种超时来定期读取 cookie。此外，您还受到最大 cookie 长度的限制，即 4 KB。

第四种方案，使用localStorage，似乎克服了cookies的限制，甚至可以使用事件监听。接受的答案中描述了如何使用它。

在 2018 年，公认的答案仍然有效，但现代浏览器有一个更新的解决方案，即使用 BroadcastChannel。有关如何使用 BroadcastChannel 在选项卡之间轻松传输消息的简单示例，请参阅其他答案。

4

10 回答 10

177

为此，您最好使用 BroadcastChannel。请参阅下面的其他答案。但是，如果您仍然喜欢使用 localstorage 在选项卡之间进行通信，请这样做：

为了在选项卡向其他选项卡发送消息时得到通知，您只需绑定“存储”事件。在所有选项卡中，执行以下操作：

$(window).on('storage', message_receive);

message_receive每次您在任何其他选项卡中设置 localStorage 的任何值时，都会调用该函数。事件侦听器还包含新设置为 localStorage 的数据，因此您甚至不需要解析 localStorage 对象本身。这非常方便，因为您可以在设置后立即重置该值，以有效清理任何痕迹。以下是消息传递函数：

// use local storage for messaging. Set message in local storage and clear it right away
// This is a safe way how to communicate with other tabs while not leaving any traces
//
function message_broadcast(message)
{
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}


// receive message
//
function message_receive(ev)
{
    if (ev.originalEvent.key!='message') return; // ignore other keys
    var message=JSON.parse(ev.originalEvent.newValue);
    if (!message) return; // ignore empty msg or msg reset

    // here you act on messages.
    // you can send objects like { 'command': 'doit', 'data': 'abcd' }
    if (message.command == 'doit') alert(message.data);

    // etc.
}

因此，现在一旦您的选项卡绑定 onstorage 事件，并且您实现了这两个功能，您可以简单地将消息广播到其他选项卡调用，例如：

message_broadcast({'command':'reset'})

请记住，两次发送完全相同的消息只会传播一次，因此如果您需要重复消息，请为它们添加一些唯一标识符，例如

message_broadcast({'command':'reset', 'uid': (new Date).getTime()+Math.random()})

还要记住，广播消息的当前选项卡实际上并没有收到它，只有同一域上的其他选项卡或窗口。

您可能会问，如果用户在 setItem() 调用之后在 removeItem() 之前加载不同的网页或关闭他的选项卡，会发生什么情况。好吧，根据我自己的测试，浏览器会暂停卸载，直到整个功能message_broadcast()完成。我测试了在那里放了一些很长的 for() 循环，它仍然等待循环完成后再关闭。如果用户只是在中间杀死选项卡，那么浏览器将没有足够的时间将消息保存到磁盘，因此这种方法在我看来是一种安全的方式来发送消息而不留下任何痕迹。

于 2015-01-30T07:04:50.467 回答
159

有一个专门用于此目的的现代 API -广播频道

这很简单：

var bc = new BroadcastChannel('test_channel');

bc.postMessage('This is a test message.'); /* send */

bc.onmessage = function (ev) { console.log(ev); } /* receive */

消息不需要只是一个 DOMString。可以发送任何类型的对象。

可能，除了 API 清洁之外，它是这个 API 的主要好处 - 没有对象字符串化。

它目前仅在 Chrome 和 Firefox 中受支持，但您可以找到使用 localStorage的polyfill 。

于 2017-05-07T11:34:13.730 回答
49

对于那些寻找不基于 jQuery 的解决方案的人，这是Thomas M 提供的解决方案的纯 JavaScript 版本：

window.addEventListener("storage", message_receive);

function message_broadcast(message) {
    localStorage.setItem('message',JSON.stringify(message));
}

function message_receive(ev) {
    if (ev.key == 'message') {
        var message=JSON.parse(ev.newValue);
    }
}
于 2015-09-25T10:27:35.717 回答
25

Checkout AcrossTabs -跨域浏览器选项卡之间的轻松通信。它使用postMessage和sessionStorage API 的组合来使通信更加容易和可靠。

有不同的方法，每种方法都有自己的优点和缺点。让我们分别讨论：

  1. 本地存储

    优点：

    1. Web 存储可以简单地视为对 cookie 的改进，提供更大的存储容量。如果您查看 Mozilla 源代码，我们可以看到5120 KB（5 MB在 Chrome 上等于250 万个字符）是整个域的默认存储大小。与典型的 4 KB cookie 相比，这为您提供了更多的工作空间。
    2. 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据不会被发送回服务器 - 减少了客户端和服务器之间的流量。
    3. 存储在 localStorage 中的数据会一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该站点的用户使用。

    缺点：

    1. 它适用于同源策略。因此，存储的数据只能在同一来源上使用。

  2. 饼干

    优点：

    1. 与其他人相比，没有什么AFAIK。

    缺点：

    1. 4 KB 的限制是针对整个 cookie，包括名称、值、到期日期等。为了支持大多数浏览器，请将名称保持在 4000 字节以下，并将 cookie 的整体大小保持在 4093 字节以下。
    2. 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据都会被发送回服务器 - 增加了客户端和服务器之间的流量。

    通常，允许执行以下操作：

    • 总共300个饼干
    • 每个 cookie 4096 字节
    • 每个域20 个 cookie
    • 每个域81920 字节（给定 20 个最大大小为 4096 = 81920 字节的 cookie。）

  3. 会话存储

    优点：

    1. 它类似于localStorage。
    2. 更改仅适用于每个窗口（或 Chrome 和 Firefox 等浏览器中的选项卡）。所做的更改已保存并可用于当前页面，以及将来在同一窗口中访问该站点时可用。窗口关闭后，存储被删除

    缺点：

    1. 数据仅在设置它的窗口/选项卡内可用。
    2. 数据不是持久的，即一旦关闭窗口/选项卡就会丢失。
    3. 就像localStorage， tt 适用于同源策略。因此，存储的数据只能在同一来源上使用。

  4. 留言

    优点：

    1. 安全地启用跨域通信。
    2. 作为一个数据点，WebKit实现（由 Safari 和 Chrome 使用）目前没有强制实施任何限制（除了因内存不足而施加的限制）。

    缺点：

    1. 需要从当前窗口打开一个窗口，然后只要保持窗口打开就可以通信。
    2. 安全问题- 通过 postMessage 发送字符串意味着您将获取其他 JavaScript 插件发布的其他 postMessage 事件，因此请确保对targetOrigin传递给消息侦听器的数据实施一个健全性检查。

  5. PostMessage + SessionStorage的组合

    使用 postMessage 在多个选项卡之间进行通信，同时在所有新打开的选项卡/窗口中使用 sessionStorage 来保存正在传递的数据。只要选项卡/窗口保持打开状态，数据就会被保留。因此，即使打开选项卡/窗口关闭，打开的选项卡/窗口即使在刷新后也将拥有整个数据。

我为此编写了一个名为AcrossTabs的 JavaScript 库，它使用 postMessage API 在跨域选项卡/窗口和 sessionStorage 之间进行通信，以保持打开的选项卡/窗口身份，只要它们存在。

于 2017-04-09T08:54:01.117 回答
14

我创建了一个库sysend.js 用于在浏览器选项卡和 windows 之间发送消息。该库没有任何外部依赖项。

您可以将其用于同一浏览器和域中的选项卡/窗口之间的通信。该库使用 BroadcastChannel（如果支持）或来自 localStorage 的存储事件。

API 非常简单：

sysend.on('foo', function(data) {
    console.log(data);
});
sysend.broadcast('foo', {message: 'Hello'});
sysend.broadcast('foo', "hello");
sysend.broadcast('foo', ["hello", "world"]);
sysend.broadcast('foo'); // empty notification

当您的浏览器支持 BroadcastChannel 时，它会发送一个文字对象（但实际上它是由浏览器自动序列化的），如果不支持，则首先将其序列化为 JSON，然后在另一端反序列化。

最近的版本还有一个帮助 API 来创建跨域通信的代理（它需要目标域上的单个 HTML 文件）。

这是一个演示。

新版本还支持跨域通信，如果你proxy.html在目标域上包含一个特殊的文件并proxy从源域调用函数：

sysend.proxy('https://target.com');

（proxy.html 是一个非常简单的 HTML 文件，在库中只有一个 script 标签）。

如果您想要双向通信，您需要在其他域上执行相同的操作。

注意：如果您将使用 localStorage 实现相同的功能，则 Internet Explorer 中存在问题。存储事件被发送到触发事件的同一个窗口，对于其他浏览器，它只为其他选项卡/窗口调用。

于 2019-01-04T11:44:09.020 回答
9

人们应该考虑使用的另一种方法是共享工作者。我知道这是一个前沿概念，但是您可以在共享工作人员上创建一个中继，它比本地存储快得多，并且不需要父/子窗口之间的关系，只要您在同一个来源.

有关我对此进行的一些讨论，请参见我的回答。

于 2016-02-11T21:21:18.530 回答
7

基于localStorage. _ _

TabUtils.BroadcastMessageToAllTabs("eventName", eventDataString);

TabUtils.OnBroadcastMessage("eventName", function (eventDataString) {
    DoSomething();
});

TabUtils.CallOnce("lockname", function () {
    alert("I run only once across multiple tabs");
});

PS：我冒昧地在这里推荐它，因为当事件几乎同时发生时，大多数“锁定/互斥/同步”组件在 websocket 连接上失败。

于 2017-09-08T11:28:09.887 回答
4

我创建了一个与官方Broadcastchannel相同的模块，但它具有基于 localstorage、indexeddb 和 unix-sockets 的回退。这确保了它即使与 Webworkers 或 Node.js 也始终有效。请参阅pubkey:BroadcastChannel。

于 2018-06-22T18:52:12.720 回答
2

这是Tomas M对 Chrome的回答的开发storage部分。我们必须添加一个监听器：

window.addEventListener("storage", (e)=> { console.log(e) } );

在存储中加载/保存项目不会运行此事件 - 我们必须手动触发它

window.dispatchEvent( new Event('storage') ); // THIS IS IMPORTANT ON CHROME

现在，所有打开的选项卡都将收到该事件。

于 2020-04-30T22:52:25.030 回答
1

我在我的博客上写了一篇关于此的文章：Sharing sessionStorage data across browser tabs。

使用库，我创建了storageManager. 您可以按如下方式实现：

storageManager.savePermanentData('data', 'key'): //saves permanent data
storageManager.saveSyncedSessionData('data', 'key'); //saves session data to all opened tabs
storageManager.saveSessionData('data', 'key'); //saves session data to current tab only
storageManager.getData('key'); //retrieves data

还有其他方便的方法来处理其他场景。

于 2016-12-14T11:37:47.743 回答