Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 580
Alon Avatar asked Nov 11 '12 18:11

Alon


People also ask

How do I pass a value from child window to parent window?

From a child window or a small window once opened, we can transfer any user entered value to main or parent window by using JavaScript. You can see the demo of this here. Here the parent window is known as opener. So the value we enter in a child window we can pass to main by using opener.

How do I transfer data from iframe to parent?

Sending data from child iframe to parent window : Whenever you embed an iframe, the iframe will have a reference to the parent window. You just need to use the PostMessage API to send data via the window. parent reference of the parent window.

How do you find the parent element in a child window?

You just need to prefix “ window. opener. ” and write the same code that you will write in the parent window's HTML page to access its elements.


1 Answers

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

like image 185
Dr.Molle Avatar answered Oct 07 '22 18:10

Dr.Molle