After creating a component in vue 3, I found myself in need of a new window, similar to a popup, using the window.open(url, name, config) method. Furthermore, I required a way to execute a function when this child window is closed.
(Please bear in mind that this pertains to interactions between a window object and its parent, not events between child and parent components.)
I attempted to attach event listeners to the popup window; however, these are removed once the URL redirects within the child window.
In the script section of a component, I added a method to launch a new window and perform other tasks upon clicking a button, as shown 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>
Despite trying various event listener approaches like the ones mentioned above, I am still unable to trigger the desired behavior.
Here are some observations:
- The URL originates from a different source.
- Upon closing the child window just before the redirection of the URL, the event is successfully triggered.
- This project utilizes Vue.js 3 and TypeScript 5.