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é!
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);
Si vous pouvez utiliser la boîte de dialogue jQuery UI , elle comporte en fait un événement close
.
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! :)
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.
}
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?";
};
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:
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.
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()