2

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

4

2 回答 2

7

有很多方法可以进行窗口间通信。它们是 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
于 2016-02-11T19:31:34.770 回答
2

为消息作者尝试此代码

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

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

打开第二个窗口并尝试此消息侦听器

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 上

于 2013-10-14T02:13:13.823 回答