浏览器选项卡之间的通信

Question

我有一个 HTML 页面（文件 main.html）使用 JavaScript 和 window.open("newtab.html")在同一域中打开一个新选项卡> 方法。

在新标签页中，用户通过单击按钮来结束他们的活动。此时，我想向打开器窗口发送一条消息。我尝试使用 postMessage，但在新标签中我无法引用开启器。

在新标签中我想要类似的东西，但我已经“ko”了

var w = window.opener;
if (w) {
    w.postMessage("hi", "http://10.150.10.43");
} else {
    alert("ko");
}

将消息从辅助选项卡/窗口发送到主要选项卡/窗口（在同一域中）的最佳方式是什么？

Answer 1

这很奇怪。使用window.open("newtab.html") 打开一个新窗口应该使新打开的窗口能够通过window.opener 引用打开器。

无论如何，在同一域上的两个窗口之间进行通信还有其他几种选择。我认为以下两个是最容易实现的：

1. 使用 localStorage。如果您在新标签窗口中将某个键下的某些数据存储到 localStorage 中，则打开器窗口将获得一个存储事件。如果您使用处理程序捕获事件，则可以从新选项卡窗口中写入的 localStorage 中读取数据。请注意，仅当两个页面都在同一个域中并且实际上存在两个窗口时才会触发事件（事件不会在写入数据的同一个窗口中触发）。有关如何执行此操作的更多信息 - 例如，请参阅：http://diveintohtml5.info/storage.html

2. 使用共享网络工作者。 Web Worker 是一个 JS 脚本，在单独的线程上在后台执行。共享网络工作者是一种特殊类型的网络工作者，它允许任意数量的父文档与单个工作者进行通信。因此，您可以使用工作程序在打开器窗口和新选项卡窗口之间中继消息。与工作人员通信的 API 与 postMessage API 非常相似。有关如何执行此操作的更多信息 - 例如，请参阅：http://www.sitepoint.com/javascript-shared-web-workers-html5/。