Javascript Detect Closing Popup Loaded With Another Domain

Have you ever wondered how to detect when a popup from another domain is being closed using JavaScript? In this guide, we'll walk you through the steps to achieve this goal.

When it comes to working with popups in JavaScript, accessing the window object of a popup opened from a different domain can be a challenge due to the same-origin policy. This security feature restricts scripts running in one domain from accessing resources in another domain. However, there are ways to detect when a popup loaded from another domain is being closed.

One approach is to use the `window.postMessage` method, which allows communication between two windows with different origins. To implement this, you need to add event listeners in both the parent window (the window that opened the popup) and the popup window. Here's a basic example to get you started:

In the parent window:

const popup = window.open('https://www.otherdomain.com/popup.html');
popup.postMessage('popupLoaded', 'https://www.otherdomain.com');
window.addEventListener('message', function(event) {
  if (event.origin === 'https://www.otherdomain.com' && event.data === 'popupClosed') {
    // Handle popup closed event
    console.log('Popup closed');
  }
});

In the popup window (`popup.html`):

window.addEventListener('beforeunload', function() {
  window.opener.postMessage('popupClosed', 'https://www.yourdomain.com');
});
window.opener.postMessage('popupLoaded', 'https://www.yourdomain.com');

In this code snippet, we first create a popup window and send a message indicating that the popup has been loaded. When the popup window is about to be closed (`beforeunload` event), we send another message to notify the parent window that the popup is being closed. The parent window listens for this message and can take appropriate action when the popup is closed.

Remember to replace the domain names (`https://www.otherdomain.com`, `https://www.yourdomain.com`) with the actual domain names you are working with.

Another approach is to periodically check the status of the popup window using a timer. You can use the `setInterval` function to check if the popup has been closed. Here's a simplified version of how you can implement this:

const popup = window.open('https://www.otherdomain.com/popup.html');
const checkPopup = setInterval(function() {
  if (popup.closed) {
    // Handle popup closed event
    console.log('Popup closed');
    clearInterval(checkPopup);
  }
}, 1000);

By periodically checking the `popup.closed` property, you can detect when the popup window has been closed and take appropriate actions in your code.

In conclusion, detecting when a popup loaded from another domain is being closed in JavaScript requires a thoughtful approach due to security restrictions. By using the `window.postMessage` method or periodically checking the popup status, you can achieve this functionality in your web applications. Remember to handle edge cases and ensure cross-domain communication is secure.