How to Communicate Between Parent and Child Windows in Javascript

When the Parent and Child Are On the Same Domain

Parent to Child

In order for the parent to communicate with the chid, the parent should first save 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()

// Variable that holds the handle of the child
var __CHILD_WINDOW_HANDLE = null;

// On opening child window
$("#open-child-window").on('click', function() {
	__CHILD_WINDOW_HANDLE = window.open('child.php', '_blank', 'width=700,height=500,left=200,top=100');
});

// This will call the function ProcessParentMessage on the child
// __CHILD_WINDOW_HANDLE.ProcessParentMessage('Message to the child');

The child code has the function that the parent is calling :

// This function (available in the child code) will be called by the parent
function ProcessParentMessage(message) {
	// do something with the message
}
Child to Parent

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

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

The parent code has the function that the child is calling :

// This function (available in the parent code) will be called by the child
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

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.

Parent to Child

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

// Variable that holds the handle of the child
var __CHILD_WINDOW_HANDLE_2 = null;

// On opening child window
// child.php will be on a different domain
$("#open-child-window").on('click', function() {
	__CHILD_WINDOW_HANDLE_2 = window.open('child.php', '_blank', 'width=700,height=500,left=200,top=100');
});

// This will post a message to the child
// __CHILD_WINDOW_HANDLE_2.postMessage('Message to the child', "*");

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

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

function ProcessParentMessage_2(message) {
	// do something with the message
}
Child to Parent

Similarly the child 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', "*");

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

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

function ProcessChildMessage_2(message) {
	// do something with the message
}

Different Domains - Demo

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

Send Message to Child
Messages from Child

You can download the codes for the demo here