小编典典

标签或窗口之间的通讯

html

我正在寻找一种方法,以在浏览器中的多个选项卡或窗口之间进行通信(在同一个域中,而不是在CORS上)而不会留下痕迹。

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

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

第三种方式,使用cookie,将一些数据存储在浏览器中,这实际上看起来像是向同一域中的所有窗口发送消息,但是问题在于您永远无法知道所有选项卡之前是否都已经读取了“消息”打扫干净。您必须实现某种超时才能定期读取Cookie。此外,您受到最大Cookie长度(4KB)的限制。

第四个解决方案,使用localStorage,似乎克服了cookie的限制,甚至可以监听事件。已接受的答案中描述了如何使用它。

编辑2018:可接受的答案仍然有效,但是对于现代浏览器,有一个更新的解决方案可以使用BroadcastChannel。
请参阅其他答案,以获取一个简单的示例,该示例描述了如何使用BroadcastChannel轻松在选项卡之间传输消息。


阅读 326

收藏
2020-05-10

共1个答案

小编典典

编辑:您可以更好地为此目的使用BroadcastChannel,请参阅下面的其他答案。
但是,如果您仍然希望使用本地存储在选项卡之间进行通信,请按照以下方式进行操作:

为了在某​​个选项卡向其他选项卡发送消息时获得通知,您只需要在“存储”事件上进行绑定。在所有标签中,执行以下操作:

$(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()周期,但在关闭之前它仍然等待周期结束。如果用户只是杀死它们之间的选项卡,则浏览器将没有足够的时间将消息保存到磁盘,因此在我看来,这种方法是一种安全的方法,它可以毫无痕迹地发送消息。欢迎发表评论。

2020-05-10