浏览器选项卡之间的通信 [英] Communication between browser tabs

问题描述

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

I've an HTML page (file main.html) opening a new tab in the same domain using JavaScript with the window.open("newtab.html") method.

在新标签中，用户可以通过点击按钮来结束他们的活动.此时，我想向 opener 窗口发送一条消息.我尝试使用 postMessage，但在新选项卡中我无法引用 opener.

In the new tab users do something ending their activity clicking a button. At this point, I would like to send a message to the opener window. I tried with postMessage, but from a new tab I can't have a reference to the opener.

从新标签中我想要类似的东西，但我已经ko"了

From the new tab I'd like something like, but I've "ko"

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

从辅助选项卡/窗口向主选项卡/窗口(在同一域中)发送消息的最佳方式是什么?

What is the best way to send message from the secondary tab/window to the main one (in the same domain)?

推荐答案

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

That is strange. Opening a new window with window.open("newtab.html") should give the newly opened window the ability to reference the opener via window.opener.

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

Anyway, there are several other options for communicating between two windows on the same domain. I think that the following two are the easiest to implement:

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

1. Use localStorage. If you store some data under some key into localStorage in the new tab window, then the opener window will get a storage event. If you catch the event with a handler, you can read the data from localStorage that you wrote from the new tab window. Note that events are fired only if both pages are on the same domain, and if there are actually two windows in question (events are not fired within the same window that wrote data). For more info on how to do this -- see for example: http://diveintohtml5.info/storage.html

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

Use shared Web workers. A web worker is a JS script that is executed in the background on a separate thread. Shared web workers are a special type of Web workers that allow any number of parent documents to communicate with a single worker. So, you could use the worker to relay messages between the opener window and the new tab window. The API for communicating with a workers is very similar to the postMessage API. For more info on how to do this -- see for example: http://www.sitepoint.com/javascript-shared-web-workers-html5/.

这篇关于浏览器选项卡之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！