浏览器选项卡之间的通信

Question

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

在新选项卡中，用户可以通过单击按钮来结束他们的活动。 此时，我想向 opener 窗口发送一条消息。 我尝试使用 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引用 opener 。

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

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

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