J'ai utilisé Exemple: P> window.onbeforeunload code> Pour afficher un message personnalisé lorsqu'un utilisateur tente de quitter un site. window.onbeforeunload = function(){
if(some_condition){
return "Are you sure you want to navigate away from this page?\nAll unsaved changes will be lost.";
}
};
+--------------------------------------------------------+
| Are you sure you want to navigate away from this page? |
| All unsaved changes will be lost. |
| |
| [ Yes ] [ Cancel ] |
+--------------------------------------------------------+
8 Réponses :
Y a-t-il un moyen de faire cela?
Nope.
Vous êtes coincé avec l'invite que le navigateur vous donne.
@Moin, ce que vous avez posté, vous détournez tous les événements de clic sur la page. Utilisez le bouton Actualiser, le bouton arrière, fermez le navigateur. Cela échouera.
@macek, il n'y a pas de source. Il est connu. Vous ne pouvez pas modifier les alertes, confirmer, les invites ou tout autre élément fenêtré. Vous ne pouvez pas changer la boîte de dialogue ONBEFOREUnload. Ces fenêtres sont standard pour une raison, afin que les gens sachent ce qu'ils obtiennent. Si vous pouviez empêcher quelqu'un de partir avec votre idée, un pirate informer l'aimerait. Tout comme les fenêtres apparaissent dans les vieux jours où vous pourriez masquer le bouton de fermeture. Certaines personnes avaient de bonnes intentions avec il n'y avait pas de proche, mais les annonceurs avaient des "bonnes" intentions aussi.
Epascarello, je vote cela en cas de baisse car ce n'est pas une réponse utile si vous ne pouvez pas la soutenir. Dire que c'est un "fait connu" n'aide pas. Au fait, vous peut modifier le contenu de la boîte de dialogue ONBEFOREUnload. Voir mon exemple de code ci-dessus. Parce qu'il y avait une marge de manœuvre ici, je me demandais s'il y en avait plus.
@macek, il n'y a rien à sauvegarder. La documentation sur ONBEFOREUNLOaLoad est essentiellement inexistante puisqu'il s'agit d'une MS a fait que d'autres navigateurs copiés. Regardez les docs développeur.Mozilla.org/fr/dom/dom/dom/dom /window.onbeforeunload Et vous verrez qu'ils donnent des informations à Zippo dessus. Vous pouvez ajouter un message à la boîte de dialogue, mais vous ne pouvez pas changer l'apparence et ressentir ce que vous impliquez. Changer le texte est à peine une marge de manœuvre car vous pouvez le faire avec tous les autres éléments fenêtres [alerte, confirmez, invite]. Vous espérez un miracle d'une réponse et vous n'en tirerez pas un.
Et comment Facebook le fait-il alors?
@Arminhiersetter Comment Facebook fait-il quoi?
Autant que je puisse voir Facebook, ce n'est pas une exception. Il utilise également une invite native du navigateur pour cela. C'est la réponse la plus précise en ce moment.
@Madbreaks L'affiche de cette question à partir de 10 ans a demandé à propos de se débarrasser de la boîte de dialogue, qui n'a jamais été possible. Oui Certains navigateurs vous permettent de changer le texte, mais la question modifiait la boîte de dialogue pour être une personnalisée.
@epascarello mon mauvais, j'ai mal lu. Toutes mes excuses de vous décader. :)
Le Décharger événement sera déclencher lorsqu'un utilisateur essaie de naviguer. Cependant, si vous utilisez un DIV comme fenêtre contextuelle, le navigateur naviguera loin avant que l'utilisateur ait la chance de le lire.
Pour les garder là, vous devez utiliser une boîte de dialogue d'alerte / invite / confirmation / confirmation. (autant que je sache)
Hmm, c'est ce qui m'inquiète. Merci quand même.
Et comment Facebook le fait-il alors?
@Arminhiersetter Il est possible que les navigateurs avaient mis à jour leurs API dans les 6 1/2 ans que cette réponse a été donnée
@Arminhiersetter ou ils sont liés à un gestionnaire de clic sur tous leurs liens
@Arminhiersetter, ils ne nécessairement . Lorsque vous cliquez sur la case pour écrire un statut, vous ne pouvez plus cliquer sur des liens sur le site en dehors de la boîte de poste. Donc, ils déclenchent simplement une action lorsque vous essayez de quitter / fermer la boîte postale, ce qui ne quitte pas la page. Si vous essayez d'actualiser la page lorsqu'il est au milieu de l'écriture d'un statut, vous verrez la zone d'alerte de navigateur normale.
N'est pas possible d'utiliser le déchargement pour y parvenir, conformément aux documents: "Interactions UI sont inefficaces (fenêtres.open, alerte, confirmez, etc.)" . à l'avanceLoad est uniquement (limité). développeur.mozilla.org/en-us/docs/web/ API / WINDOW / UNLOAD_ELTER
S'ils cliquent sur le bouton arrière ou quelque chose de similaire, je pense que les cases d'alerte / invite / de confirmation sont votre seule option.
Cependant, vous pouvez probablement écouter des événements de KeyPress spécifiques, tels que CTRL / CMD + W / R, et interrompre ceux avec une boîte de dialogue.
var confirmOnPageExit = function (e) {
// If we haven't been passed the event get the window.event
e = e || window.event;
var message = "Are you sure you want to navigate away from this page? All unsaved changes will be lost.";
// For IE6-8 and Firefox prior to version 4
if (e)
{
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
window.onbeforeunload = confirmOnPageExit;
Une autre alternative que je vois des sites utilisez pour cette fonctionnalité crée une action lorsque l'utilisateur fait défiler la page comme lorsqu'ils font défiler jusqu'à la barre d'adresse comme ce site fait http://www.diamondcandles.com/ Cela peut être fait en utilisant Mouseleave Event sur l'élément de corps. Par exemple:
3 ans et plus de plus tard, merci pour cette solution, mais il est un peu trop agressif, mais ne manque toujours pas de capturer toutes les manières qu'un utilisateur puisse naviguer loin de la page.
La liaison à un HTML a très bien fonctionné pour moi au lieu de décharger. La raison est bien expliquée dans un autre Répondre ici.
$("html").bind("mouseleave", function () {
$('#emailSignupModal').modal(); \\or any modal
$("html").unbind("mouseleave");
});
C'est une solution médiocre que cet événement est viré (en chrome) chaque fois que l'utilisateur déplace la souris à l'extérieur du document.
@wawka! Désolé, vous n'aimez pas ma solution. Bien que ce n'est pas loin des autres réponses acceptées sur cette page. On dirait que vos connaissances sur les événements sont limitées. S'il vous plaît donnez-lui une lecture. THX
Bien sûr, mes connaissances sont limitées. Personne ne sait tout;) Cependant, cela ne change pas le fait que cette solution n'est pas correcte ou du moins pas universelle. Peut-être que JQuery change lorsque cet événement est attrapé, mais s'il utilise Just Native Addeventlistener sur Document.documentation , Chrome tire le rappel chaque fois que vous quittez la fenêtre du navigateur (par exemple, lorsque vous souhaitez modifier l'onglet). Il n'est pas nécessaire de ressentir un ressentiment :)
Pouah. Si je suis allé sur un site qui a fait cela, je ne reviendrais jamais. De toute évidence, il y a une telle chose que plusieurs fenêtres utilisées à la fois, cela serait incroyablement ennuyeux.
Je viens de le faire pour un projet.
i définissez espère que cela aide. rel = "externe" sur tous les liens externes, puis utilisé js / jQuery pour détecter si le lien comporte cet attribut, et s'il le fait - empêche le comportement par défaut et enflamme un modal.
Hey Cela vous aidera à Afficher un modèle ou une fenêtre contextuelle lorsqu'un utilisateur quitte votre site Web fort>.
Avant d'utiliser ce code, veuillez essayer P>
<!DOCTYPE html>
<html lang="en">
<head>
<title>show popup when user leaves website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Show popup when user leaves your website</h2>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Hey! wait for free __________</h4>
</div>
<div class="modal-body">
<p>Get this code for free</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("html").bind("mouseleave", function () {
$('#myModal').modal();
$("html").unbind("mouseleave");
});
});
</script>
</body>
</html>
Nope, et c'est pour une bonne raison (à savoir Sécurité )
Gaby, je crois comprendre que l'interruption de ce processus pourrait facilement conduire à détournement de détournement, mais à fournir des raisons réelles serait plus utile. Il suffit de dire que "la sécurité" ne me dis pas vraiment beaucoup.
Nan? Et comment Facebook le fait-il alors?