How can I send an event from child window to its parent window

Question

My main goal is:

Going to my application, open a link there in a new tab, make something in the new tab and send an event to the parent-main tab to refresh.

I have learned 2 techniques that doesn't do exactly what I need:

1. postMessage - works as far as I know only on iframe and not on tabs
2. window.opener - works only with window.open(url) that opens only new window and not new tab.

How can I pass an event from the child to the parent using tabs? I'd be happy for a specific example for javascript code in the parent and the child. It should work for cross-domain (for example: www.mydomain.com and bills.mydomain.com).

Is there a a jQuery solution I am missing?

Earthaearthborn

I believe window.open should return a new Window object and if you're not running into problems with the same origin policy, you may be able to attach a listener from the parent onto this object or set an interval which checks for some variable. – Embree

@PaulS., It window.open does not open in new tab. – Earthaearthborn

Actually users can decide if window.open()s are opened in the new tab or new window. There is a setting for this in browser's options. – Intone

It doesn't not work in chrome, but thanks for – Earthaearthborn

Answer 1

The following works for me in chrome, firefox, ie(didn't test more browsers)

assume 3 documents

1. (www.mydomain.com/parent.html)the page that contains the 'main'-document with the link
2. (bills.mydomain.com/child.html)the page that will be opened by the link
3. (www.mydomain.com/dispatcher.html)explained later

at first set the domain-property of all 3 documents to mydomain.com

<script>
document.domain="mydomain.com";
</script>

in parent.html create a hidden iframe with a name-property of e.g. "hiddenframe". Also create some function that may later receive a response.

parent.html should now look like this:

<script>
document.domain="mydomain.com";
function fx(msg)//receives the response
{
  alert(msg)
}
</script>
<iframe name="hiddenframe" style="display:none"></iframe>
<a href="http://bills.mydomain.com/child.html" target="_blank">click</a>

---

In child.html you'll now be able to load a document into the hidden iframe inside parent.html

<script>
document.domain="mydomain.com";
window.open('http://www.mydomain.com/dispatcher.html','hiddenframe');
</script>

(don't be confused in face of the use of window.open() here, there will not open a new window, the page will be loaded into the iframe in parent.html)

---

In dispatcher.html you now may call the function inside parent.html

<script>
document.domain="mydomain.com";
parent.fx('you just got some response');
</script>

---

When you only need to reload the parent.html it's a little bit easier.

Again set the document.domain-property in parent.html and child.html(you don't need the iframe in parent.html and the dispatcher.html)

In parent.html also set the name-property of the window, e.g.

<script>
  window.name="parentTab";
</script>

In child.html you now may access the parentTab-window(tab)

<script>
    document.domain="mydomain.com";
    window.open('http://www.mydomain.com/parent.html','parentTab');
</script>

...or simply use "parentTarget" as target-property of a link or form in child.html

Paramaribo

Answer 2

What I did for myself, I implemeted some ajax to submit changes from the window2 into database. I implemeted JSON to pull new data from the database back to window1

Epithelioma

Answer 3

By seeing how similar questions only talk about window.open (which you don't want to use) and as afaik there is no easy way to get all windows on the same domain, for what you want, you probably need to write your own framework to do this using window.sessionStorage.
I don't think you'll get access to subdomains with it and definitely not to other domains, though.

---

Practical ideas for window-specific message passing using sessionStorage..
You can pass things in the URL (GET) so a way to pass messages could be to make the parent generate a unique id for itself parentID, a unique id for it's child childID (which is inserted into the URL along with the parentID on click if you're using an <a>, or a hidden field if you don't mind a <form method="GET">), then with sessionStorage save messages to the parent using keys like parentID.childID.timeStamp, have an interval in both parent and child that looks for sessionStorage keys starting with the window's ID, then a ., (i.e. the parent looks for parentID.) on a match copy the key & value to a new var, delete (so it doesn't get found again) and then parse as desired.

I know this is a bit wordy but I think it is likely much easier to explain as a concept than writing working example code.

Embree