web-dev-qa-db-fra.com

est-il possible d'ouvrir une fenêtre contextuelle avec javascript et de détecter le moment où l'utilisateur la ferme?

La question est à peu près tout dans le titre.

Est-il possible (et comment?) D'ouvrir une fenêtre contextuelle avec javascript, puis de détecter le moment où l'utilisateur la ferme?

J'utilise jquery dans le projet, donc une solution jquery serait bien. À votre santé!

javascriptjquerypopup
62
Pablo

Si vous avez le contrôle sur le contenu de la fenêtre contextuelle, gérez l'événement unload de la fenêtre et notifiez la fenêtre d'origine via la propriété opener, en vérifiant d'abord si l'ouvre-porte a été fermé. Notez que cela ne fonctionnera pas toujours dans Opera.

window.onunload = function() {
    var win = window.opener;
    if (!win.closed) {
        win.someFunctionToCallWhenPopUpCloses();
    }
};

Étant donné que l'événement unload sera déclenché chaque fois que l'utilisateur navigue en dehors de la page dans la fenêtre contextuelle et pas seulement lorsque la fenêtre est fermée, vous devez vérifier que la fenêtre contextuelle s'est effectivement fermée dans someFunctionToCallWhenPopUpCloses:

var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
    window.setTimeout(function() {
        if (popUp.closed) {
            alert("Pop-up definitely closed");
        }
    }, 1);
}

Si vous ne contrôlez pas le contenu de la fenêtre contextuelle ou si l'un de vos navigateurs cible ne prend pas en charge l'événement unload, vous êtes réduit à une sorte de solution de sondage dans la fenêtre principale. Ajustez l'intervalle en fonction.

var win = window.open("popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
    if (win.closed !== false) { // !== is required for compatibility with Opera
        window.clearInterval(pollTimer);
        someFunctionToCallWhenPopUpCloses();
    }
}, 200);
88
Tim Down

Si vous pouvez utiliser la boîte de dialogue jQuery UI , elle comporte en fait un événement close.

6
eje211

Il existe une solution très simple à votre problème.

Commencez par créer un nouvel objet qui ouvrira une pop comme celle-ci:

var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');

Afin de savoir quand cette fenêtre contextuelle est fermée, il vous suffit de continuer à vérifier cela avec une boucle comme celle-ci:

var loop = setInterval(function() {   
    if(winObj.closed) {  
        clearInterval(loop);  
        alert('closed');  
    }  
}, 1000);

Vous pouvez maintenant remplacer alert par le code javascript de votre choix.

S'amuser! :)

5
Kshitij Mittal

Essayez de regarder dans les événements unload et beforeunload window. Le fait de les surveiller devrait vous permettre de rappeler lorsque le DOM est déchargé lorsque la fenêtre est fermée, par exemple:

var newWin = window.open('/some/url');
newWin.onunload = function(){
  // DOM unloaded, so the window is likely closed.
}
5
ajm

Pour ouvrir une nouvelle fenêtre, appelez:

var wnd = window.open("file.html", "youruniqueid", "width=400, height=300");

Si vous voulez juste savoir quand cette fenêtre va se fermer, utilisez onunload.

wnd.onunload = function(){
    // do something
};

Si vous souhaitez une confirmation de l'utilisateur avant de pouvoir le fermer, utilisez onbeforeunload.

wnd.onbeforeunload = function(){
    return "are you sure?";
};
3
jAndy

Nous le faisons dans l'un de mes projets au travail.

L'astuce consiste à avoir une fonction JS dans votre page parent que vous prévoyez d'appeler lorsque la fenêtre contextuelle est fermée, puis associez l'événement de déchargement dans la fenêtre contextuelle.

La propriété window.opener fait référence à la page qui a généré cette fenêtre contextuelle.

Par exemple, si j’écrivais une fonction nommée callingPageFunction sur ma page d’origine, je l’appellerais depuis le menu contextuel comme suit:

$(window).unload(function() {
    window.opener.callingPageFunction()
});

Deux notes:

  1. Cela devrait être emballé dans une fonction prête.
  2. J'ai une fonction anonyme parce que vous voudrez peut-être une autre logique là-bas
3
Powerlord

Pour le moment, la seule façon dont je puisse penser est de créer une fonction sur votre page parent qui a un délai d’expiration qui s’appelle après 10 secondes. Dans la fonction, vous pouvez également vérifier la valeur d'un cookie pour savoir s'il est vrai ou faux. Lorsque la fenêtre contextuelle se ferme, définissez un cookie sur true.

J'espère que cela t'aides.

0
Ash Burlaczenko

Oui, gérez l'événement onbeforeUnload pour la fenêtre contextuelle, puis appelez une fonction dans la fenêtre parent à l'aide de:

window.opener.myFunction()
0
TimS