JavaScript Window Unload Not Working [Vanilla Javascript]

Question

I came across a lot of similar questions on stack overflow, but the issue is that most of them are old (as in answered near about 3 to 4 years ago).

PROBLEM

I want to execute a function when the tab is closed (I want to use vanilla java-script) . I've tried doing the following:

// No.1 -> THROWS AN ERROR *Blocked alert('hello') before onunload*
window.onunload = function() {
  alert('hello');
}

// No.2 -> THROWS AN ERROR *Blocked alert('hello') before onunload*
window.onbeforeunload = function(){
  alert('hello')
};

Way no.3 shown below works as it throws a dialog before leaving or reloading, but the issue is that it runs a function when we click "X" and try to close the tab but when the dialog appears which has two buttons leave and cancel.

window.addEventListener('beforeunload', (event) => {
 event.preventDefault();
 event.returnValue = '';
 bye();
});

function bye() {
 console.log('leaving');
}

The way presented above runs the function when we click on "X" but logically the function should run after we click on leave. Refer to the Screenshot below :

I need the function to execute after we click on leave or is there any other way to achieve this ?

PS: I am running vue-js but need plain JS solution

@MichaelGeary.. OK that means there is no possible way to detect that if the user closed the tab ? — Mohammad Basit, Sep 09 '20 at 13:50
I think this thread is worth a look https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing — LasagnaCode, Sep 09 '20 at 14:44
My previous comment was incorrect and I deleted it. That's what I get for commenting too early in the morning. :-) I posted an answer with a possible solution for you. — Michael Geary, Sep 09 '20 at 18:48

score 0 · Accepted Answer · answered Sep 09 '20 at 18:47

If I understand what you want to do, a combination of beforeunload and unload event listeners may do the trick.

Note that there are many restrictions on what you can do inside these listeners; see the MDN links above for details. For example, as you found, you can not use alert() inside them. But you can write to localStorage, for example.

Here is an example page that uses localStorage to save the time the page was last closed and display it when the page is loaded again. See if this is close to what you want:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Remember Page Close Time</title>
</head>
<body>

<div>
    This page was last closed on:
    <span id="closetime">Never before</span>
</div>

<script>

    window.addEventListener( 'beforeunload', function( event ) {
        event.preventDefault();
        event.returnValue = '';
    });

    window.addEventListener( 'unload', function( event ) {
        localStorage.setItem( 'closetime', '' + new Date );
    });

    const closetime = localStorage.getItem( 'closetime' );
    if( closetime ) {
        document.getElementById('closetime').innerText = closetime;
    }

</script>

</body>
</html>

JavaScript Window Unload Not Working [Vanilla Javascript]

1 Answers1