Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Communication between browser tabs

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.

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.

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)?

like image 526
Luca Rasconi Avatar asked Aug 24 '12 10:08

Luca Rasconi


People also ask

How do I share data between two tabs?

You will have issues with browsers such as Edge, which in private mode do not share local storage between tabs. There are several other ways to share data between tabs: you can also use postMessage or BroadcastChannel .

Do tabs share the same session?

The sessions are always shared trough all tabs. If two different Sessions are enough, you could use a privat/incognito browser window. A other solution could be to use HTML 5 SessionStorage for your variables.

Is local storage shared between tabs?

The main features of localStorage are: Shared between all tabs and windows from the same origin. The data does not expire. It remains after the browser restart and even OS reboot.


1 Answers

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. 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

  2. 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/.

like image 180
Ivan Zuzak Avatar answered Oct 06 '22 13:10

Ivan Zuzak