Run script js when trying to close the window

Question

I have a form that is a popup (overlapping div)

<div class="bloco-newsletter" style="background-image: url(http://bhpump.izap.ws/plus/imggen/imageChangeColor/005873/bg-newsletter.png)">

    <div class="newsletter-title">NEWSLETTER</div>

    <form action="http://bhpump.izap.ws/plus/modulos/perfil/registrar_newsletter.php" method="post">
        <input type="hidden" name="op" value="register">

        <div class="text">Não saia ainda, temos ofertas exclusivas para você! Deixe seu e-mail aqui.</div>
                        <input class="ipt-newsletter" type="text" name="plus_email" value="" maxlength="60" data-placeholder="E-MAIL">


        <div class="btn-assinar">
            <img class="vermais_left pull-left" src="http://bhpump.izap.ws/plus/imggen/imageChangeColor/005873/btn-left-style.png" alt="">
            <input class="vermais_middle pull-left" style="background-color: #005873" name="ok" type="submit" value="ASSINAR">
            <img class="vermais_right pull-left" src="http://bhpump.izap.ws/plus/imggen/imageChangeColor/005873/btn-right-style.png" alt="">
        </div>
    </form>
</div>

This form is hidden, I want when trying to close the window open this form and only close the window if you click on Submit or close the popup

I tried that plus the window and shut:

global $xTema;
$xTema->addJSOnReady('
$(window).unload(function(){
$("#modal_24").modal("show");
});
');

Answer 1

Even if you use unload or beforeunload the form will never be displayed, this is because there is no way to prevent this, the use of unload is aimed at small actions, such as destroying cookies or sessionStorage, read this answer:

Jquery beforeunload is called when I click on link

By the time the event is run the page has already started to be "destroyed" (read about destruct and GUI in C/C++ or C# applications to understand how Guis work in operating systems).

Also understand that events unload and beforeunload are not only called in the close window, but any page that does it will run as the event is not called onCloseWindow (this event doesn’t even exist), it’s called onunload, translating unload would be like "download", ie the page loaded will be downloaded (or destroyed), each pagination, tab closure or window the event is triggered, ie using these events to call forms is a bad idea in every sense, besides very difficult to implement (or it would be impossible).

I recommend that you analyze what this form needs and see if this is really the best way.

Still if you really want to do it the way it is (which I personally find a terrible experience for the user) you should try using the beforeunload with return. Look at my answer:

Send message to browser

The code should look something like:

window.addEventListener('beforeunload', (event) => {
    // Cancel the event as stated by the standard.
    event.preventDefault();

    //Para customizar o texto, e é necessário para funcionar no Safari e Chrome, IE e Firefox anterior a versão 4
    event.returnValue = '';
});

This is the most that you will be able to prevent closure, if the user accepts, if not, infortunately has no way to force or control the user’s browser, the browser is his and if he wants to close everything has nothing to do, taking into account that it is very annoying some limitations that are placed on web pages that only make the user want to avoid certain websites.

---

How some websites manage to do this, such as facebook?

So I went to test, some people told me that on facebook a custom modal appeared when closing the window, but in fact this is a wrong impression of what happens, in fact when we click close tab or browser the screen that appears is this (if the text or comment field has a message not sent):

That custom modal appears when we click on links inside the site where the script is running thanks to window.onpopstate, that is only occurs if click and links inside the site and do not close the page, see that here I filled the field "status" facebook and tried to click the link of another profile, the image that appeared to me was this:

So it’s actually a mistake and it’s impossible to customize the popup/modal of beforeunload, because if we could not control events without asking the user what would be basically you control the actions of the user (and this nobody wants to right).

Answer 2

I don’t know what version you’re using of jQuery, but the function unload() is deprecated since the version 1.8. You can use the function on() and wait for the event unload.

$(window).on('unload',function(){
  $("#modal_24").modal("show");
}); 

Answer 3

The listening Unload is already deprecated (was removed in version 3.0+ of Jquery), the most recommended method is the unbeforeunload that occurs when you press F5, CTRL+F5, click on a hyperlink or any element that with javascript redirects to another page, sending forms and etc.

Note that as @Guilherme Nascimento mentioned, in unbeforeunload/Unload you can not run any javascript, some as Alert("Hellow Wolrd") or calls that open windows window.open("http://minhaurl","minhaid","minhasconfigs"), redirects and etc are blocked by browsers. It has utility for example (as already mentioned): destroy cookies or sessionStorage.

In fact, there is no simple and unique way to listen to the "closing" (window being close) of a window but I went through a situation where I needed this functionality and followed the steps of the code below.

(The code below is a feature to clear the session of a logged in user after closing a window, it can also be adapted to other features that are allowed by browsers).

Follow the code tested and run on Chrome 67+ and Firefox 61+:

var wrapper = function () {

var deslogarUsuario = true;

 //Se o usuário está "focando" a janela, não há motivos para crer 
//que ele pretende fechar a mesma (oposto de blur)
$(window).on('focus', function () {
    deslogarUsuario = false;  
});

$(window).on('blur', function () {

    $(window).off('resize'); //evita listening múltiplos e desnecessários
    deslogarUsuario = true;
    //quando o usuário está minimizando a janela
    if (!document.hidden) {
        deslogarUsuario = false;
    }
    //quando o usuário está maximizando a janela
    $(window).on('resize', function (e) {
        deslogarUsuario = false;
    });

});

//Quando o usuário está deixando a página html, nos dá mais razões para 
//acreditar que ele pretende fechar a janela (com o mouse)
$('html').on('mouseleave', function () {
    deslogarUsuario = true;
});

//Quando o usuário está entrando na página, nos dá menos razões para 
//acreditar que ele pretenda fechar a janela (com o mouse)
$('html').on('mouseenter', function () {
    deslogarUsuario = false;
});

//Estas escutas são essenciais, pois F5 e CTRL+F5 também acionam o evento 
//onbeforeunload, você também pode tentar escutar por eventos como ALT+F4 
//mas este mesmo não terá o mesmo efeito, pois é primeiramente escutado pelo 
//navegador e efetuado a ação padrão (fechar)
$(document).on('keydown', function (e) {

    if (e.keyCode == 91 || e.keyCode == 18 && !blurOnPage) {
        deslogarUsuario = false;
    }

    if (e.keyCode == 116 || (e.ctrlKey && e.keyCode == 82)) {

        deslogarUsuario = false;
    }
});

//Evita que hiperlinks acionem a função no onbeforeunload
$(document).on("click", "a", function () {
    deslogarUsuario = false;
});

//Evita que botões acionem a função no onbeforeunload (útil para aqueles que 
//contiverem javascripts que redirecionam ou recarregam a página)
$(document).on("click", "button", function () {
    deslogarUsuario = false;

});

//Evita os submits de formulários
$(document).on("submit", "form", function () {
    deslogarUsuario = false;
});

//Evita os input[type="submit"] de formulários
$(document).on("click", "input[type=submit]", function () {
    deslogarUsuario = false;
});

//Função que pode ser utilizada ou adaptada para quando ocorrer fechamento 
//da janela
var derrubaUsuario = function () {
    $.ajax({
        url: '/MeuController/MinhaActionLogOut',
        async: false,
        data: {

        },
        error: function () {
        },
        success: function (data) {
        },
    });
};

window.onbeforeunload = function () {

    console.log('teste');
    if (deslogarUsuario) {
        derrubaUsuario();
    }
};

};

Answer 4

Depending on the version but I usually use the function unload()

$( window ).unload(function() {
      //Seu codigo
});

Answer 5

When the user tries to leave the page for any reason, the event beforeUnload is fired.

For example, when trying to submit a form, click on a link, close a window (tab) etc..

You can use the following code:

$(window).on("beforeunload", function() { 
    // seu código 
});

Source: How to capture the browser window close Event?