How to Communicate Between Parent and Child Windows in Javascript

When the Parent and Child Are On the Same Domain

Parent to Child Communication :

1. The parent page can communicate with the child by first saving the handle of the child window (the return value from window.open() function). It can then call a function in the child in the form like handle.function_name()

   <button id="open-child-window"></button>

   // variable holds the handle of the child page
   let child_window_handle = null;
   
   // on opening child window
   document.querySelector("#open-child-window").addEventListener('click', function() {
   	child_window_handle = window.open('child.php', '_blank');
   
   	// call the function ProcessParentMessage on the child page
   	// child_window_handle.ProcessParentMessage('Message to the child');
   });
   

2. The child page should have the function that the parent page is calling :

   // function will be called by the parent page
   function ProcessParentMessage(message) {
   	// do something with the message
   }
   

Child to Parent Communication :

1. The child page can communicate to the parent via the window.opener() function. It can call a function in the parent in the form window.opener.function_name()

   // call the function ProcessChildMessage on the parent page
   window.opener.ProcessChildMessage('Message to the parent');
   

2. The parent code should have the function that the child is calling :

   // function will be called by the child page
   function ProcessChildMessage(message) {
   	// do something with the message
   }
   

Same Domain - Demo

Click on the button below to open a child window on the same domain as this page :

You can download the codes for the demo here

When the Parent and Child Are On Different Domains

In the case of different domains communication is done through HTML5's message passing.

1. The parent page can send a message to the child using the window.postMessage() function.

   <button id="open-child-window"></button>

   // variable that holds the handle of the child
   let child_window_handle = null;
   
   // on opening child window
   document.querySelector("#open-child-window").addEventListener('click', function() {
   	child_window_handle = window.open('child.php', '_blank');
   
   	// this will post a message to the child
   	// child_window_handle.postMessage('Message to the child', "*");
   });
   

2. The child page on the other hand can listen for message events through an event handler.

   // event handler will listen for messages from the parent
   window.addEventListener('message', function(e) {
   	// e.data hold the message from parent
   	console.log(e.data);
   } , false);
   

Child to Parent Communication :

1. Similarly the child page can send a message to the parent. It identifies the parent through window.opener and sends a message through postMessage().

   // this will post a message to the parent
   window.opener.postMessage('Message to the parent', "*");
   

2. The parent catches the message from the child through the message event handler.

   // event handler will listen for messages from the child
   window.addEventListener('message', function(e) {
   	// e.data hold the message from child
   	console.log(e.data); 
   } , false);
   

Different Domains - Demo

Click on the button below to open a child window on a different domain :

You can download the codes for the demo here