What's the best way to detect the onclose (onbeforeunload) event of a child window in a Vue.js application?

I'm facing an issue while working with Vue.js. I have been trying to create a function that opens a new window in Chrome and captures the onclose or onbeforeunload event of that window from the same Vue component where it was opened. Here is how I tried to implement it:

...
methods: {
    gitConnet(){
            var child = window.open("https://www.google.it", '_blank', 'fullscreen=no,height=600,width=800,top=100,location=no,titlebar=0');

            child.onclose = function(){ console.log('Child window onclose closed'); };

            child.onbeforeunload = function(){ console.log('Child window onbeforeunload closed'); };
        }
}
...

Although this code successfully opens the new window, I'm not seeing any message in the console when I close the window. I even attempted to store the child variable in the data property of the component, but it didn't make any difference.

If anyone could assist me in capturing the onclose event of the window within the Vue component, I would greatly appreciate it.

Thank you in advance.

Answer №1

Regrettably, it is not possible to achieve that in that manner.

Nevertheless, something similar to this could bring you closer to your desired outcome.

...
methods: {
  gitConnet(){
    var child = window.open("https://www.google.it", '_blank', 'fullscreen=no,height=600,width=800,top=100,location=no,titlebar=0');

    var loop = setInterval(function() {   
      if(child.closed) {
        clearInterval(loop);
        alert('closed');

        // Execute your tasks once it has been closed.

      }
    }, 500);
  }
}

...

Here is a simplified example: https://jsfiddle.net/v3qkswd2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I incorporate various Mixamo animations onto an FBX model in Three.js without skins?

I'm working on developing a game that features an animated character with various animations sourced from Mixamo. The goal is to have the character's animation change dynamically based on user interactions within the game, such as Walking, Runnin ...

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...

What is the correct way to send parameters in the action tag?

Can I set the res variable as the form action in HTML? <script> var name =$("#name").val(); var file =$("#file").val(); var res= localhost:8080 + "/test/reg?&name="+name+"&file=" +file ; </script> <form acti ...

Align the center of the active Tab in Material UI

Is it feasible to position the active tab in the center of the screen horizontally, excluding cases where the first or last tab is selected? <Tabs className={classes.tabs} indicatorColor='primary' scrollB ...

Guide on retrieving just the time from an ISO date format using JavaScript

let isoDate = '2018-01-01T18:00:00Z'; My goal is to extract the time of 18:00 from the given ISO date using any available method, including moment.js. ...

Utilizing JavaScript to Invoke Controller Actions

Currently, my ASP.NET MVC actions return JSON data, which is then displayed on the screen by my client using jQuery's ajax function. The JavaScript code I use to call these controller actions includes absolute paths like this: $.ajax({ url: &apos ...

Employing v-if in conjunction with a sliced string literal

I would like to switch on and off the rendering of a card in my Vue application. Currently, I am utilizing v-if with v-card. Code: myString == "MONEY <v-card v-if="`${myString.slice(4,5)}` == "EY". An error is being triggered saying ...

Change the font size of the class .MuiTypography-body1 to a different size

I attempted to change the font size of the .MuiTypography-body1 class After doing some research, I came across this helpful link https://material-ui.com/api/typography/ Unfortunately, I'm having trouble with the override not working as expected Could ...

How can I retrieve JSON information from the wunderground API?

I have an async function below that connects to a weather API and I am trying to extract two data points: Temperature in Fahrenheit & Celsius. The API_Key has been removed, but it can be obtained for free on the site if needed. Although my console.log(res ...

Getting data from a database using JavaScript: A step-by-step guide

By clicking the Plus Button, I am dynamically creating rows in a table using JavaScript. In one of the cells, I need to retrieve values from the master table for users to select in PHP. Unfortunately, I am unable to include PHP within the script. What is ...

Send the form data from a modal controller in AngularJS to an ng-controller outside of the modal

There seems to be a confusion with the functionality not working as expected: In my Angular application, I have a main page with an ng-controller named "SearchCtrl" that handles sending search requests to a webserver. app.controller('SearchCtrl&apos ...

Animate the CSS when the content is within the viewport using pagepiling.js integration

I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...

How to process and handle a JSON response containing multiple objects using JavaScript

I received a JSON response that looks something like this. { returnCode: 'Success', info: null, result: { payload: '{ "BatchNo":"143123", "Supplier":"Automotive", "ItemNumber":"AP123", ...

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null" Below you can find the code snippet in questi ...

safely sending different form inputs in a Ruby on Rails form

Within this snippet, you'll find a part of a table with a form. Each row has its own submit button, which means users have to click on each one individually. I'm currently working on changing this so there is just one button for submission. < ...

Tips for designing a three-dimensional egg shape using Three.js?

I'm looking to create a unique egg shape using Three.js, but I seem to be missing the correct equation. Below is the code I currently have, utilizing LatheGeometry. Can anyone provide some guidance? var r0 = 40 var r1 = r0/4; var inc = Math.PI/r0; po ...

What methods do certain API services use to accept Authorization headers from any source?

Payment processing platforms like Stripe and Square provide the capability to include your API key in an Authorization header as a Bearer token. However, my understanding is that allowing credentials, such as the Authorization header, from all origins is ...

How to effectively utilize ViewChildren _results in Angular 4?

I'm working with a list of checkboxes that are generated within an ngFor loop: <md-checkbox #hangcheck [id]="hangout?.$key" class="mychecks" > I'm Interested </md-checkbox> To reference these checkb ...

Tips on modifying the message "Please fill out this field" in the JQuery validation plugin

Is there a way to customize the message "This field is required" in the Jquery form validation plugin to display as "このフィールドは必須です"? Changing the color of the message can be achieved using the code snippet below: <style type="tex ...

Elevate the value within a function and refresh the said function

I'm currently facing a challenge with this particular piece of code, let spin = new TimelineMax(); spin.to($('.particle'), 150, { rotation: 360, repeat: -1, transformOrigin: '50% 50%', ease: Linear.easeNone }); Th ...