WWW中的页面间通信？

Posted 2023-02-21

【中文标题】WWW中的页面间通信？

【英文标题】：Inter-Page communication in WWW?

【发布时间】：2013-10-21 13:10:31

【问题描述】：

有没有办法在javascript中的多个网页之间进行客户端进程间通信？理想情况下，我希望在没有任何复杂的服务器状态更新、ping 等的情况下完成此操作，并使其仅在客户端上工作。如果我也可以制作这个跨浏览器，我会在天堂哈哈。有任何想法吗？谢谢！

【问题讨论】：

cookies、查询字符串、本地存储

您是指在同一台计算机上吗？还是点对点？

@user2736012 但是没有推送能力？我认为 localStorage 仍然需要某种忙等待（除非有 onChange() 回调或其他东西......）@BraveNewCurrency 在同一台计算机上，没有任何东西返回服务器。

Communication between tabs or windows的可能重复

【参考方案1】：

试试这个message writer的代码

function sendMessage(name, value) 
    var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";


sendMessage("test", "hello world!")

打开第二个窗口并try this message listener

function getMessage(c_name) 
    if (document.cookie.length > 0) 
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) 
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) 
                c_end = document.cookie.length;
            
            return unescape(document.cookie.substring(c_start, c_end));
        
    
    return "";

function check() 
    var message = getMessage('test');
    var element = document.getElementById('output');
    element.innerhtml = message;

window.setInterval(check, 1000);

它在 Chrome 上运行良好，您还应该确保它在其他主流浏览器中也能运行，特别是在 IE 上

【讨论】：

不不不，我希望这是无请求的。我不想依赖服务器实例来工作。我认为 localStorage 方法可能是唯一的方法。

它根本不使用服务器，虽然它写入cookie，但它不更新服务器会话数据，只是在单个浏览器中某个域的页面之间共享的浏览器cookie .如果您使用的是 FF，您可以使用 Chrome 开发者工具或 Firebug 上的网络活动标签来检查这一点。

【参考方案2】：

有很多方法可以进行窗口间通信。它们是 Window.postMessage、Local Storage、WebRTC，以及现在的 Shared Web Workers。

这些都有自己的优点/缺点：

本地存储仅适用于同源页面（源是协议：//网站：端口）。它还将消息广播到同一来源的每个打开的窗口，因此如果您打开大量页面，它会很慢）不幸的是，这是 IE11 及以下版本支持的唯一跨窗口技术。 Shared Workers 仅在 Chrome 和 Firefox 中受支持（也仅支持同源，且 worker.js 文件必须从同源加载）。您还必须将通信流量从一个页面“中继”到另一个页面。 Window.postMessage 只在父/子窗口之间有效，但支持跨域！

在两个独立网站之间进行跨域通信真的很笨重。您要么必须从第一个网站执行 window.open() 并使用 postMessage 与第二个网站进行通信，要么您必须设置这个复杂的架构，在每个站点上使用隐藏的 iframe 与托管的网页对话在同一个网站地址上，然后这些 iframe 通过 Local Storage 或 Shared Worker 相互通信。这被称为“通信中心”。 （相当复杂，对吧？）

更糟糕的是，页面间通信已被视为安全漏洞并且几乎被回避。如果有些人有他们的方式，我想跨域 postMessage 将被删除。我希望看到的是一些协议增强和一些类似 oAuth 的技术，因此我们可以保护该技术并使其合理。未来将有大量数据移动到客户端，在网页之间共享数据将变得至关重要。

也就是说，不要重新制造***。有几个库可以实现窗口间通信。

Endpoint.js - 我开发的一个库（免责声明），它调解窗口（在多个来源）、选项卡、Web 工作者、客户端/服务器以及进程之间的 IPC 之间的通信。它还创建了一个 ad-hoc 覆盖网络，允许所有这些技术相互传递信息。 crosstab - 实现上面的“通信中心”方法。 ozp-iwc - OZone Widget Framework 的 IPC 框架。启用本地存储和 PostMessage