浏览器标签页之间的通信

Question

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

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

从新标签页中，我希望实现类似以下内容，但是我失败了。

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

如何从同一域中的次要选项卡/窗口向主选项卡/窗口发送消息是最佳方式？

- Luca Rasconi

---

可能是Can I control two browser windows with one HTML5 app?的重复问题。 - josh3736

嘿，Luca，别忘了标记答案！Ivan值得这个声望点数。 :-) - Ionică Bizău

是的，你是正确的 :) - Luca Rasconi

可能是标签页或窗口之间的通信的重复问题。 - Michał Perłakowski

Answer 1

很奇怪，使用 window.open("newtab.html") 打开新窗口应该能使新窗口通过 window.opener 引用到当前窗口。

无论如何，在同一域中通信的两个窗口有其他几种选项。我认为以下两种是最容易实现的:

1. 使用localStorage。如果您在新标签页中将某些数据存储在localStorage下的某个键下，那么打开该标签页的窗口将会获得一个 storage 事件。如果您使用处理程序捕获事件，则可以从新标签页中写入的localStorage中读取数据。请注意，只有在两个页面在同一个域中且有两个相关窗口时才触发事件（事件不会在写入数据的同一窗口内触发）。欲了解更多信息，请参见：http://diveintohtml5.info/storage.html

2. 使用共享Web Worker。Web Worker 是在单独线程后台执行的 JS 脚本。共享 Web Worker 是一种特殊类型的 Web Worker，允许任意数量的父文档与单个 Worker 通信。因此，您可以使用工作程序在当前窗口和新标签页之间传递消息。与postMessage API通信的API与共享Web Worker非常相似。欲了解更多信息，请参见：http://www.sitepoint.com/javascript-shared-web-workers-html5/。

- Ivan Zuzak