Popup Window To Return Data To Parent On Close

Have you ever needed to create a popup window in your web application that returns data to the parent window when closed? It's a common requirement in software development, and fortunately, it's not as complicated as it may sound. In this article, we'll walk you through the process of setting up a popup window that can send data back to its parent window when it's closed.

To achieve this functionality, you'll need to use JavaScript. The key concept behind this is the use of the `window.opener` object, which allows us to access the parent window from the popup window. Additionally, we will make use of the `window.postMessage()` method to safely enable cross-origin communication between the popup and the parent window.

Let's start by creating the popup window. You can do this by using the `window.open()` method in JavaScript. Here's a simple example code snippet to create a popup window:

const popup = window.open('popup.html', 'Popup', 'width=400,height=300');

In this code snippet, we are opening a new window with the URL 'popup.html' and specifying its dimensions. You can replace 'popup.html' with the URL of the content you want to display in the popup window.

Next, let's look at how to send data back to the parent window when the popup is closed. To do this, you can add an event listener for the `beforeunload` event on the popup window. This event is triggered just before the window is closed. Within this event listener, you can use `window.opener.postMessage()` to send data back to the parent window. Here's an example code snippet to achieve this:

window.addEventListener('beforeunload', () => {
  window.opener.postMessage({ message: 'Data from popup window' }, '*');
});

In this code snippet, we are sending a message containing the data 'Data from popup window' back to the parent window using `postMessage()`. The `'*'` in the second parameter of `postMessage()` specifies that the message can be sent to any origin.

Now, let's see how we can receive this message in the parent window. You can add an event listener for the `message` event on the `window` object of the parent window. Here's an example code snippet to handle the message sent from the popup window:

window.addEventListener('message', (event) => {
  if (event.data.message) {
    console.log('Received data from popup window:', event.data.message);
  }
});

In this code snippet, we are listening for the `message` event and checking if the received data contains the 'message' property. If it does, we log the received data to the console.

By following these steps, you can create a popup window in your web application that returns data to the parent window when closed. This can be useful for scenarios where you need to gather input or make selections in a separate window and pass that data back to the main application.