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 :

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);