Détecter la fermeture du navigateur ou de l'onglet
y a-t-il un code JavaScript/jQuery pour navigateur croisé pour détecter si le navigateur ou un onglet du navigateur est fermé, mais pas en raison d'un lien cliqué?
18 réponses
Si je reçois correctement, vous souhaitez savoir quand un onglet/fenêtre est effectivement fermé. Bien, AFAIK le seul moyen dans Javascript pour détecter ce genre de choses sont onunload et onbeforeunload événements.
Malheureusement (ou heureusement?), ces évènements sont également déclenchés lorsque vous quittez un site via un bouton link ou votre navigateur. Donc c'est la meilleure réponse que je puisse donner, Je ne pense pas que vous pouvez détecter nativement un pur close en Javascript. Corrigez-moi si Je suis mal ici.
pour certaines raisons, les navigateurs Webkit ne suivent pas les spécifications de la boîte de dialogue. Un exemple presque transversal serait proche de l'exemple ci-dessous.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
cet exemple concerne tous les navigateurs.
<body onbeforeunload="ConfirmClose()" onunload="HandleOnClose()">
var myclose = false;
function ConfirmClose()
{
if (event.clientY < 0)
{
event.returnValue = 'You have closed the browser. Do you want to logout from your application?';
setTimeout('myclose=false',10);
myclose=true;
}
}
function HandleOnClose()
{
if (myclose==true)
{
//the url of your logout page which invalidate session on logout
location.replace('/contextpath/j_spring_security_logout') ;
}
}
/ / ceci fonctionne dans IE7, si vous fermez l'onglet ou le navigateur avec un seul onglet
Désolé, je n'ai pas été en mesure d'ajouter un commentaire à l'une des réponses existantes, mais dans le cas où vous vouliez mettre en œuvre une sorte de dialogue d'avertissement, je voulais juste mentionner que toute fonction de gestionnaire d'événements a un argument - événement. Dans votre cas, vous pouvez appeler l'événement.preventDefault () pour refuser de quitter la page automatiquement, puis lancer votre propre dialogue. Je considère que c'est une meilleure option que d'utiliser standard ugly et insecure alert(). J'ai personnellement mis en place mon propre ensemble de boîtes de dialogue basées sur objet kendoWindow (Kendo UI de Telerik, qui est presque entièrement open-sourced, sauf de kendoGrid et kendoEditor). Vous pouvez également utiliser les boîtes de dialogue de jQuery UI. Notez cependant que de telles choses sont asynchrones, et vous aurez besoin de lier un handler à l'évènement onclick de chaque bouton, mais tout cela est assez facile à implémenter.
cependant, je suis d'accord que l'absence de l'événement proche réel est terrible: si vous, par exemple, voulez réinitialiser votre état de session à la fin seulement en cas de vraie fermeture, c'est un problème.
il n'y a pas d'événement, mais il y a une propriété window.closed qui est prise en charge dans tous les principaux navigateurs au moment de la rédaction du présent document. Ainsi, si vous aviez vraiment besoin de savoir que vous pourriez sonder la fenêtre pour vérifier cette propriété.
if(myWindow.closed){do things}
Note:
Interrogation rien n'est généralement pas la meilleure solution. L'événement window.onbeforeunload doit être utilisé si possible, la seule mise en garde étant qu'il déclenche aussi si vous naviguez loin.
j'ai dû automatiquement déconnecter l'utilisateur lorsque le navigateur ou l'onglet ferme, mais pas lorsque l'utilisateur navigue vers d'autres liens. Je ne voulais pas un message de confirmation est affiché lorsque cela se produit. Après avoir lutté avec cela pendant un certain temps, en particulier avec IE et Edge, voici ce que j'ai fini de faire (coché travailler avec IE 11, Edge, Chrome, et Firefox) après basing off l'approche par cette réponse .
d'abord, démarrez un compte à rebours sur le serveur dans le gestionnaire d'événements beforeunload dans JS. Les appels ajax doivent être synchrones pour que IE et Edge fonctionnent correctement. Vous devez également utiliser return; pour empêcher la boîte de dialogue de confirmation d'afficher comme ceci:
window.addEventListener("beforeunload", function (e) {
$.ajax({
type: "POST",
url: startTimerUrl,
async: false
});
return;
});
démarrage de la minuterie place le drapeau cancelLogout à false . Si l'utilisateur rafraîchit la page ou navigue vers un autre lien interne, le drapeau cancelLogout sur le serveur est défini à true . Lorsque la minuterie s'arrête, il vérifie le drapeau cancelLogout pour voir si l'événement de déconnexion a été annulé. Si le minuteur a été annulé, alors il arrêterait le minuteur. Si le navigateur ou l'onglet était fermé, alors le drapeau cancelLogout resterait false et le gestionnaire d'événements se déconnecterait de l'utilisateur.
note de mise en oeuvre: j'utilise ASP.NET MVC 5 et j'annule la déconnexion dans une méthode dépassée Controller.OnActionExecuted() .
Pour des tâches similaires, vous pouvez utiliser sessionStorage pour stocker des données localement jusqu'à ce que l'onglet du navigateur est fermé.
l'objet sessionStorage stocke les données pour une seule session (les données sont supprimées lorsque l'onglet Navigateur est fermé).( W3Schools )
<div id="Notice">
<span title="remove this until browser tab is closed"><u>dismiss</u>.</span>
</div>
<script>
$("#Notice").click(function() {
//set sessionStorage on click
sessionStorage.setItem("dismissNotice", "Hello");
$("#Notice").remove();
});
if (sessionStorage.getItem("dismissNotice"))
//When sessionStorage is set Do stuff...
$("#Notice").remove();
</script>
window.onbeforeunload = function() {
console.log('event');
return false; //here also can be string, that will be shown to the user
}
essayez ceci, Je suis sûr que cela fonctionnera pour vous.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
try{
opera.setOverrideHistoryNavigationMode('compatible');
history.navigationMode = 'compatible';
}catch(e){}
function ReturnMessage()
{
return "wait";
}
function UnBindWindow()
{
$(window).unbind('beforeunload', ReturnMessage);
}
$(window).bind('beforeunload',ReturnMessage );
});
</script>
window.onbeforeunload = function ()
{
if (isProcess > 0)
{
return true;
}
else
{
//do something
}
};
cette fonction affiche une boîte de dialogue de confirmation si vous fermez la fenêtre ou rafraîchissez la page pendant un processus dans le navigateur.Cette fonction fonctionne dans tous les navigateurs.Vous devez définir isProcess var dans votre processus ajax.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "tab close";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
sendkeylog(confirmationMessage);
return confirmationMessage; //Webkit, Safari, Chrome etc.
});
j'ai trouvé un moyen, que fonctionne sur tous mes navigateurs .
testé sur les versions suivantes: Firefox 57, Internet Explorer 11, Edge 41, l'un des Chrome latestés (il ne montrera pas ma version)
Note : onbeforeunload Fire si vous quittez la page de n'importe quelle façon possible (rafraîchir, fermer le navigateur, rediriger, lien, soumettre..). Si vous voulez seulement que cela se produise sur la fermeture du navigateur, liez simplement les gestionnaires d'événements.
$(document).ready(function(){
var validNavigation = false;
// Attach the event keypress to exclude the F5 refresh (includes normal refresh)
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
window.onbeforeunload = function() {
if (!validNavigation) {
// -------> code comes here
}
};
});
comme @jAndy l'a mentionné, il n'y a pas de code javascript adéquat pour détecter une fenêtre fermée. J'ai commencé par ce que @Syno avait proposé.
j'ai traversé une telle situation et si vous suivez ces étapes, vous pourrez La détecter.
Je l'ai testé sur Chrome 67+ et Firefox 61+.
var wrapper = function () { //ignore this
var closing_window = false;
$(window).on('focus', function () {
closing_window = false;
//if the user interacts with the window, then the window is not being
//closed
});
$(window).on('blur', function () {
closing_window = true;
if (!document.hidden) { //when the window is being minimized
closing_window = false;
}
$(window).on('resize', function (e) { //when the window is being maximized
closing_window = false;
});
$(window).off('resize'); //avoid multiple listening
});
$('html').on('mouseleave', function () {
closing_window = true;
//if the user is leaving html, we have more reasons to believe that he's
//leaving or thinking about closing the window
});
$('html').on('mouseenter', function () {
closing_window = false;
//if the user's mouse its on the page, it means you don't need to logout
//them, didn't it?
});
$(document).on('keydown', function (e) {
if (e.keyCode == 91 || e.keyCode == 18) {
closing_window = false; //shortcuts for ALT+TAB and Window key
}
if (e.keyCode == 116 || (e.ctrlKey && e.keyCode == 82)) {
closing_window = false; //shortcuts for F5 and CTRL+F5 and CTRL+R
}
});
// Prevent logout when clicking in a hiperlink
$(document).on("click", "a", function () {
closing_window = false;
});
// Prevent logout when clicking in a button (if these buttons rediret to some page)
$(document).on("click", "button", function () {
closing_window = false;
});
// Prevent logout when submiting
$(document).on("submit", "form", function () {
closing_window = false;
});
// Prevent logout when submiting
$(document).on("click", "input[type=submit]", function () {
closing_window = false;
});
var toDoWhenClosing = function() {
//write a code here likes a user logout, example:
//$.ajax({
// url: '/MyController/MyLogOutAction',
// async: false,
// data: {
// },
// error: function () {
// },
// success: function (data) {
// },
//});
};
window.onbeforeunload = function () {
if (closing_window) {
toDoWhenClosing();
}
};
};
Il est possible de le vérifier avec l'aide de la fenêtre.fermé dans un gestionnaire d'événement sur "décharger" l'événement de ce genre, mais le délai d'utilisation est nécessaire (donc le résultat ne peut être garanti que si qch prévenir ou retarder l'apparition de la fenêtre de fermeture):
Exemple de JSFiddle (Testé sur lates Safari, FF, Chrome, Edge et IE11 )
var win = window.open('', '', 'width=200,height=50,left=200,top=50');
win.document.write(`<html>
<head><title>CHILD WINDOW/TAB</title></head>
<body><h2>CHILD WINDOW/TAB</h2></body>
</html>`);
win.addEventListener('load',() => {
document.querySelector('.status').innerHTML += '<p>Child was loaded!</p>';
});
win.addEventListener('unload',() => {
document.querySelector('.status').innerHTML += '<p>Child was unloaded!</p>';
setTimeout(()=>{
document.querySelector('.status').innerHTML += getChildWindowStatus();
},1000);
});
win.document.close()
document.querySelector('.check-child-window').onclick = ()=> {
alert(getChildWindowStatus());
}
function getChildWindowStatus() {
if (win.closed) {
return 'Child window has been closed!';
} else {
return 'Child window has not been closed!';
}
}
essayez ceci. Il va travailler. la méthode jquery unload est dépréciée.
window.onbeforeunload = function(event) {
event.returnValue = "Write something clever here..";
};
<script type="text/javascript" language="Javascript">
function DetectBrowserExit()
{
alert('Execute task which do you want before exit');
}
window.onbeforeunload = function(){ DetectBrowserExit(); }
</script>
j'ai testé ce script dans les navigateurs Web suivants: Pour le moment, le navigateur web Opera ne supporte pas l'événement onBeforeUnload. Internet Explorer Mozilla Firefox Google Chrome Safari