草庐IT

javascript - 选项卡或窗口之间的通信

coder 2023-07-03 原文

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

  1. using the window object
  2. postMessage
  3. cookies
  4. localStorage

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

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

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

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

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

最佳答案

您最好为此目的使用 BroadcastChannel。请参阅下面的其他答案。然而，如果您仍然更喜欢使用 localstorage 进行选项卡之间的通信，请按以下方式进行:

为了在一个选项卡向其他选项卡发送消息时得到通知，您只需绑定(bind)“存储”事件。在所有选项卡中，执行此操作:

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

每次您在任何其他选项卡中设置 localStorage 的任何值时，都会调用函数 message_receive。事件监听器还包含新设置到 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.
}

现在，一旦您的选项卡绑定(bind)了 onstorage 事件，并且您实现了这两个功能，您就可以简单地向其他选项卡调用广播消息，例如:

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

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

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

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

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

关于javascript - 选项卡或窗口之间的通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28230845/

javascript选项卡message39localStoragehtmlbrowserbroadcast-channel

有关javascript - 选项卡或窗口之间的通信的更多相关文章

  1. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  2. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  3. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  4. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  5. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  6. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  7. [工业相机] 分辨率、精度和公差之间的关系 - 2

    📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年

  8. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说，除了我需要加载某种X模块外，我不知道从哪里开始。因此，如果有人有线索，如果您能指出正确的方向，那就太好了。谢谢 最佳答案 XCB，X的下一代API使用XML格式定义X协议(protocol)，并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似，只是它描述的不是CAPI，而是X协议(protocol)。目前，C和Python存在绑定(bind)。理论上，Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

随机推荐