How to properly add an event listener to a child window in vuejs?

From a component in vue 3, i needed a new window, like a popup, using window.open(url, name, config). And i need to trigger a function when the child window is closed.

(Please note that this is not regarding events on child-parent component, or vice-versa, rather on a window object and its parent)

I tried adding event listeners on the popup window, but those are getting destroyed when the url is redirected on the child window.

Inside the script tab on a component, added a method to open new window and do other processing, on a button click, like below:

<template>
    ....
    <button @click="onPositive"></button>
</template>

<script lang="ts">
export default defineComponent({
    methods: {
        onPositive() {
           const popup = window.open(url, name, config) as Window
           popup.focus()

           // method 1:
           popup.addEventListener('beforeunload' () => {
               console.log("event triggered)
               this.onPopupClosed
           })

           // method 2:
           popup.onbeforeunload = () => {
               console.log("event triggered)
               this.onPopupClosed
           }
       },

       onPopupClosed() {
            // .....
       }
    }
})
</script>

I tried adding various event listeners like the 2 methods mentioned above, but still its not getting triggered.

Some insights:

1. url is of different origin.
2. Before the url is getting redirected, when i close the child window, its getting triggered.
3. Using Vue.js 3 & typescript 5.

If the popup is under your control, you can do something like this.

In the final place, when all the navigation is done

<script>
window.addEventListener('beforeunload', () => {
  window.opener.postMessage('popup-closed', '*');
});
</script>

window.opener.postMessage() is a method that allows communication between the current window (child window) and the window that opened it (parent window). It provides a way to send messages between the two windows, even if they are from different origins (i.e., different domains, protocols, or ports).

In your parent vue component

... 

// Listen for messages from the child window
window.addEventListener('message', (event) => {
  if (event.data === 'popup-closed') {
    onPopupClosed();
  }
});

const onPopupClosed = () => {
  // Handle the event when the child window is closed
  console.log('Popup closed');
};

window.addEventListener('message', ...) is an event listener in JavaScript that allows you to listen for messages sent from other windows or iframes in a web page. It enables cross-origin communication between different windows or iframes on the same page or across different domains, protocols, or ports.

One more thing is the window.opener property always refers to the parent window that opened the child window, regardless of any intermediate navigation to other URLs. Once a child window is opened using window.open() from the parent window, the reference to the parent window remains the same throughout the child window's lifetime, even if the child window navigates to other URLs before go through final destination.