Javascript child-parent browser tabs communication

Question

I'm building a site (the child) that displays detailed information about all vehicles from a region. The region has an id (Rid) and also the vehicle (Vid).

In the parent tab, the user selects a region and clicks on the button that opens the child tab with the selected Rid (send by cookies).

<a class="btn btn-default btn-xs" href="/TStatus" target="_blank">

In the child tab, the user can change the region to see other information and when he click on a Vehicle name the region id should be send by cookie back to the parent tab.

function ToParentTab(id) {
   var childHref = window.location.host;
   var parentwindow = myOpenWindow(window.location.protocol + "//" + childHref + "/main", ParentPage", "", window.location.protocol + "//" + childHref + "/main");
}

function myOpenWindow(winURL, winName, winFeatures, winObj) {
   var theWin;
   if (winObj != null) {
       if (!winObj.closed) {
           setCookie("teksid", regionId, 365);
           window.opener.parent.focus();
       }
   }
   setCookie("teksid", regionId, 365);
   theWin = window.open(winURL, winName, winFeatures);
   return theWin;
}

Is there a way so that when clicking on the vehicle from child tab the parent page will be focused (if closed open it again) and also call a function that will refresh the content according to the received cookie without loading again the entire page?

It was somewhat answered already: http://stackoverflow.com/questions/2236828/javascript-communication-between-tabs-windows-with-same-origin/12514384#12514384 — Annarfych, Nov 23 '16 at 19:00

bbsimonbb · Accepted Answer · 2016-11-25T11:05:39.057

You can do all this with javascript. I wouldn't use cookies for communicating between windows. Just call methods directly, or put arguments in the query string.

But you will run into some problems. The parent window doesn't automatically get notified when the document loads in the child window, and errors in the child window don't automatically bubble up to the parent. To get around these things, I like to use promises. This sample shows how to fix your problem. Notice...

seamless communication between parent and child. The parent loads the child by calling the GO() function, which returns a reference to the loaded page, so the parent can move straight on to calling functions on the child.
a double call to the child url. We call it once by ajax, to make sure it's there, and hopefully put it in the browser cache, then a second time with window.location(). If you want to do this, make sure your page doesn't totally defeat caching.
the child page has a start() function that returns a Promise. This nicely deals with the fact that the users actions in the child page are asynchronous, and can generate errors. When the user is done in the child page, resolve the promise with the user's choice.
errors bubble up to the parent.

Javascript child-parent browser tabs communication

1 Answers1