logo
post image

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 :

Send Message to Child
Messages from Child

When the Parent and Child Are On Different Domains

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

Parent to Child Communication :
  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);