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?

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