συμβάντα window js (14)

Θέλω να καταγράψω το συμβάν κλεισίματος παραθύρου/καρτέλας του προγράμματος περιήγησης. Δοκίμασα τα εξής με το jQuery:

JQuery(window).bind("beforeunload", function() ( return confirm("Θέλετε πραγματικά να κλείσετε;") ))

Αλλά λειτουργεί και με υποβολή φόρμας, κάτι που δεν είναι αυτό που θέλω. Θέλω ένα συμβάν που ενεργοποιείται μόνο όταν ο χρήστης κλείνει το παράθυρο.

Από το jQuery 1.7, η μέθοδος .live() έχει καταργηθεί. Χρησιμοποιήστε το .on() για να επισυνάψετε προγράμματα χειρισμού συμβάντων. Παλαιότεροι χρήστες εκδόσεις jQueryθα πρέπει να χρησιμοποιεί το .delegate() κατά προτίμηση από το .live()

$(window).bind("beforeunload", function() ( return true || confirm("Θέλετε πραγματικά να κλείσετε;"); ));

$(window).unbind();

JQuery(window).bind("beforeunload", συνάρτηση (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") (επιστροφή "Θέλετε πραγματικά να κλείσω?"; ) ))

Η απάντησή μου στοχεύει στην παροχή απλών τεστ.

ΠΩΣ

Δείτε την απάντηση @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ; "Θέλετε πραγματικά να κλείσετε;" : null; ))

Πόσος χρόνος θα χρειαστεί για να κλείσει τελικά η σελίδα το πρόγραμμα περιήγησης;

Κάθε φορά που ο χρήστης κλείνει τη σελίδα (κουμπί x ή CTRL+W), το πρόγραμμα περιήγησης εκτελεί αυτόν τον κωδικόπριν από την εκφόρτωση, αλλά όχι επ' αόριστον. Η μόνη εξαίρεση είναι το παράθυρο επιβεβαίωσης (επιστροφή "Θέλετε πραγματικά να κλείσετε;"), το οποίο θα περιμένει την απάντηση του χρήστη.

Chrome: 2 δευτερόλεπτα.
Firefox: ∞ (ή διπλό κλικ ή αναγκαστικό κλείσιμο)
Άκρη: ∞ (ή διπλό κλικ)
Explorer 11: 0 δευτερόλεπτα.
Σαφάρι: ΝΑ ΚΑΝΩ

Τι χρησιμοποιήσαμε για να το δοκιμάσουμε:

• Διακομιστής Node.js Express με αρχείο καταγραφής αιτημάτων
• Το παρακάτω σύντομο αρχείο HTML

Αυτό που κάνει είναι να στέλνει όσο το δυνατόν περισσότερα αιτήματα πριν το πρόγραμμα περιήγησης ολοκληρώσει τη σελίδα του (συγχρονισμένα).

function request() ( return $.ajax(( type: "GET", url: "http://localhost:3030/" + Date.now(), async: true )).responseText; ) window.onbeforeunload = ( ) => ( while (true) (​ request(); ) return null; )

Έξοδος Chrome:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /γεια σας/1480451322998 404 0,3328 δευτερόλεπτο / άθροισμα 5 ms. 2 δευτερόλεπτα αφού τα αιτήματα μπορεί να χρειαστούν μερικά χιλιοστά του δευτερολέπτου να σταλούν.

Δοκιμάστε και αυτό

Window.onbeforeunload = συνάρτηση () ( if (pasteEditorChange) ( var btn = επιβεβαίωση ("Θέλετε να αποθηκεύσετε την αλλαγή;"); if(btn === true)( SavetoEdit();//κλήση της συνάρτησής σας ) else ( windowClose();// your function call ) ) else ( windowClose();// your function call ) );

Απλά ελέγξτε...

Συνάρτηση wopen_close())( var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0") ; w.onunload = function() ( if (window.closed) ( alert("window κλειστό"); )else( alert("μόλις ανανεώθηκε"); ) ) )

Δυστυχώς, θα ενεργοποιηθεί μια επαναφόρτωση, μια νέα ανακατεύθυνση σελίδας ή ένα συμβάν κλεισίματος προγράμματος περιήγησης. Η εναλλακτική είναι να πιάσετε το αναγνωριστικό που ενεργοποιεί το συμβάν και αν είναι φόρμα, μην καλέσετε καμία συνάρτηση και αν δεν είναι το αναγνωριστικό της φόρμας, κάντε ό,τι θέλετε να κάνετε όταν κλείσει η σελίδα. Δεν είμαι σίγουρος αν αυτό είναι επίσης δυνατό άμεσα και είναι κουραστικό.

Υπάρχουν μερικά μικρά πράγματα που μπορείτε να κάνετε πριν ο πελάτης κλείσει την καρτέλα. Το javascript εντοπίζει κλείσιμο καρτέλας/κλείσιμο του προγράμματος περιήγησης του προγράμματος περιήγησης, αλλά αν η λίστα ενεργειών σας είναι μεγάλη και η καρτέλα κλείνει πριν ολοκληρωθεί, είστε αβοήθητοι. Μπορείτε να δοκιμάσετε, αλλά με την εμπειρία μου δεν εξαρτάται από αυτό.

Window.addEventListener("beforeunload", συνάρτηση (e) ( var confirmationMessage = "\o/"; /* Έχετε μικρό κωδικό ενέργειας εδώ */ (e || window.event).returnValue = επιβεβαίωσηMessage; //Gecko + IE Επιβεβαίωση επιστροφής Μήνυμα; //Webkit, Safari, Chrome ));

Εάν η προβολή της φόρμας σας τις στέλνει σε άλλη σελίδα (που πιστεύω ότι είναι, δηλαδή εκτελείται πριν από τη λήψη), μπορείτε να δοκιμάσετε να αλλάξετε την προεκφόρτωση της φόρμας σε μια κλήση ajax. Με αυτόν τον τρόπο δεν θα φύγουν από τη σελίδα σας όταν η φόρμα έχει προηγηθεί εκφόρτωση και μπορείτε να χρησιμοποιήσετε τις συνδέσεις πριν από τη φόρτωση όπως θέλετε.

Για μια λύση που λειτούργησε καλά με στοιχεία ελέγχου τρίτων όπως το Telerik (όπως το RadComboBox) και το DevExpress, τα οποία χρησιμοποιούν ετικέτες Anchor για διάφορους λόγους, σκεφτείτε τον ακόλουθο κώδικα, ο οποίος είναι μια ελαφρώς βελτιωμένη έκδοση του κώδικα desm με έναν καλύτερο επιλογέα για τον εαυτό της ετικέτα αγκύρωσης δεσμευτικό:

Var inFormOrLink; $("a:not(), a").live("κλικ", function() (inFormOrLink = true; )); $("form").bind("submit", function() (inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = απροσδιόριστο; if (! inFormOrLink) ( returnValue = " Θέλετε πραγματικά να κλείσετε;"; } eventObject.returnValue = returnValue; return returnValue; });!}

Χρησιμοποίησα το Slaks αλλά δεν λειτουργεί ως έχει επειδή το onbeforeunload returnValue αναλύεται ως συμβολοσειρά και στη συνέχεια εμφανίζεται στο παράθυρο επιβεβαίωσης του προγράμματος περιήγησης. Έτσι εμφανίζεται αληθής, για παράδειγμα «αληθινό».

Απλά χρησιμοποιώντας ανατροφοδότηση. Εδώ είναι ο κωδικός μου

Var preventUnloadPrompt; var messageBeforeUnload = "το μήνυμά μου εδώ - Είστε βέβαιοι ότι θέλετε να φύγετε από αυτήν τη σελίδα;"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("κλικ", function() ( preventUnloadPrompt = true; )); $("form").live("submit", function() ( preventUnloadPrompt = true; )); $(window).bind("beforeunload", function(e) ( var rval; if(preventUnloadPrompt) ( return; ) else ( //location.replace(redirectAfterPrompt); return messageBeforeUnload; ) return rval; ))

Var validNavigation = false; jQuery(document).ready(function () ( wireUpEvents(); )); συνάρτηση endSession() ( // Η καρτέλα του προγράμματος περιήγησης ή του προγράμματος περιήγησης είναι κλειστή // Κάντε sth εδώ ... alert("bye"); ) function wireUpEvents() ( /* * Για μια λίστα συμβάντων που ενεργοποιούνται πριν από τη φόρτωση στον IE * ελέγξτε http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = συνάρτηση () ( εντοπισμός σφαλμάτων if (!validNavigation) ( endSession(); ) ) // Επισυνάψτε το Πατήστε το πλήκτρο συμβάντος για να εξαιρέσετε την ανανέωση F5 $(document).bind("keypress", συνάρτηση (e) ( εντοπισμός σφαλμάτων if (e.keyCode == 116) ( validNavigation = true; ) )); // Επισύναψη του συμβάντος κλικ για όλα σύνδεσμοι στη σελίδα $("a").bind("click", function () ( debugger validNavigation = true; )); // Επισύναψη της υποβολής συμβάντος για όλες τις φόρμες στη σελίδα $("form").bind( "submit", συνάρτηση () ( debugger validNavigation = true; )); // Επισύναψη του κλικ συμβάντος για όλες τις εισόδους στη σελίδα $("input").bind("click", function () ( debugger validNavigation = true; )); )"εισαγάγετε τον κωδικό εδώ".

Το πρόβλημά μου: Το συμβάν "onbeforeunload" θα ενεργοποιηθεί μόνο εάν υπήρξε μονός αριθμός υποβολών (κλικ). Είχα έναν συνδυασμό λύσεων από παρόμοια νήματα στο SO για να λειτουργήσει η λύση μου. εντάξει, ο κωδικός μου θα μιλήσει.

$(document).ready(function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) συνάρτηση WarnUser() ( var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); return null; ) else ( updatefgallowPrompt(true); event.stopPropagation ) ) συνάρτηση saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#s) ul").size()); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Το μήνυμά σας"; } else { event.returnValue = " "; updatefgallowPrompt(true); } } $(document).click(function(event) { $("a").live("click", function() { updatefgallowPrompt(false); }); }); function updatefgallowPrompt (allowPrompt){ //exit msg dfds $("body").data("allowPrompt", allowPrompt); } function getfgallowPrompt(){ return $("body").data("allowPrompt"); }!}

Μετά δούλεψε για μένα.

$(window).unload(function(event) ( if(event.clientY< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = συνάρτηση () (επιστροφή "Θέλετε πραγματικά να κλείσετε;");

Ίσως απλώς ένα πρόγραμμα χειρισμού συμβάντων πριν από τη φόρτωση στο πρόγραμμα χειρισμού συμβάντων υποβολής της φόρμας:

JQuery("form").submit(function() ( jQuery(window).unbind("beforeunload"); ... ));

2

Έχω μια γονική και μια παιδική σελίδα. η θυγατρική σελίδα άνοιξε σε νέα καρτέλα

Θέλω να εμφανίσω ένα προειδοποιητικό μήνυμα (η θυγατρική σελίδα κλείνει) όταν κλείνω τη θυγατρική καρτέλα.
Πώς να εμφανίσετε κλειστά μηνύματα κατά το κλείσιμο της καρτέλας; (Δεν είναι αναζωογονητικός χρόνος)

Χρησιμοποίησα OnUnload και onbeforeunload.
Οι δύο μέθοδοι καλούνται επίσης κατά την ανανέωση της σελίδας και το κλείσιμο καρτελών.

Window.onunload = συνάρτηση doUnload(e) (ειδοποίηση ("Το μικρό παράθυρο κλείνει..."); )

Window.onbeforeunload = συνάρτηση doUnload(e) ( ειδοποίηση ("Το μικρό παράθυρο κλείνει..."); )

Πρέπει να εμφανίσω το προειδοποιητικό μήνυμα, απλώς κλείστε την καρτέλα στο πρόγραμμα περιήγησης.

Βοήθησέ με. Ευχαριστώ εκ των προτέρων.

Χρησιμοποιώ το παρακάτω σενάριο. Λειτουργούσε σε IE. Αλλά δεν λειτούργησε στο FireFox

window.onbeforeunload = function() ( if ((window.event.clientX< 0) || (window.event.clientY < 0) || (window.event.clientX < -80)) { alert("Child window is closing..."); } };

Πώς να το πετύχετε αυτό στο FireFox και σε άλλο πρόγραμμα περιήγησης.

• 4 απαντήσεις

Ταξινόμηση:

Δραστηριότητα

1

Για αυτό το afaik δεν ήταν ποτέ ένα σενάριο cross browser. Η λύση είναι να ΜΗΝ βασίζεστε σε μη τεκμηριωμένες και μεταβλητές λειτουργίες ειδικά για το πρόγραμμα περιήγησης για να εντοπίσετε οτιδήποτε σημαντικό.

Εφόσον έχετε μια σελίδα CHILD, μπορείτε να ρυθμίσετε μια δοκιμή στον γονέα (ανοίγμα) που ελέγχει την ιδιότητα childWindowHandle.closed κατά διαστήματα και ενεργεί σε αυτό.

1

Υποθέτοντας ότι απλώς προσπαθεί να ενεργοποιήσει το συμβάν πριν από τη φόρτωση Crossbrowser, αυτό το κάνει σχεδόν (εκτός από την Opera)

Δοκιμάστε( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("συμβατό"); history.navigationMode = "συμβατό"; )catch(e)() //Πού Η συνάρτηση F" Are You Going Message ReturnMessage() ( return "WTF!!!"; ) //UnBind Function function UnBindWindow() ( window.onbeforeunload = null; return true; ) //Bind Links που δεν θέλουμε να επηρεάσουμε το έγγραφο .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message Dialogue window.onbeforeunload = ReturnMessage;

0

Ενδέχεται να μην μπορείτε να το κάνετε αυτό εκτός από ορισμένες μεθόδους που βασίζονται σε cookie, κάτι που αποτελεί λύση ανάπτυξης καθώς δεν είναι επίμονη μπισκότα. Η δεύτερη αναγνώριση της ανανέωσης σελίδας, της ανακατεύθυνσης βάσει φόρμας ή της αντίστροφης ανακατεύθυνσης ή του κλεισίματος του προγράμματος περιήγησης με απόρριψη συμβάντων δεν είναι απλή και κουραστική. Συνιστάται να μην εξαρτάστε από αυτό.

μπορείτε να κάνετε μερικά μικρά πράγματα πριν ο πελάτης κλείσει την καρτέλα. javascript εντοπισμός κλείσιμο καρτέλας προγράμματος περιήγησης/κλείσιμο του προγράμματος περιήγησης , αλλά αν η λίστα ενεργειών σας είναι μεγάλη και η καρτέλα κλείνει πριν ολοκληρωθεί, είστε αβοήθητοι. Μπορείτε να δοκιμάσετε, αλλά με την εμπειρία μου δεν εξαρτάται από αυτό. Ναι, δεν μπορείτε να κάνετε διαφοροποίηση, ενημέρωση και κλείσιμο αυτήν τη στιγμή. Επομένως, δεν υπάρχει αξιόπιστος τρόπος να πει κανείς εάν ένα παιδί είναι πραγματικά κλειστό.

Window.addEventListener("beforeunload", συνάρτηση (e) ( var confirmationMessage = "\o/"; /* Έχετε μικρό κωδικό ενέργειας εδώ */ (e || window.event).returnValue = επιβεβαίωσηMessage; //Gecko + IE Επιβεβαίωση επιστροφής Μήνυμα; //Webkit, Safari, Chrome ));

Συμβάν επαναφόρτωσης σελίδας js (14)

Θέλω να καταγράψω το συμβάν κλεισίματος παραθύρου/καρτέλας του προγράμματος περιήγησης. Δοκίμασα τα εξής με το jQuery:

JQuery(window).bind("beforeunload", function() ( return confirm("Θέλετε πραγματικά να κλείσετε;") ))

Αλλά λειτουργεί και με υποβολή φόρμας, κάτι που δεν είναι αυτό που θέλω. Θέλω ένα συμβάν που ενεργοποιείται μόνο όταν ο χρήστης κλείνει το παράθυρο.

Ίσως απλώς ένα πρόγραμμα χειρισμού συμβάντων πριν από τη φόρτωση στο πρόγραμμα χειρισμού συμβάντων υποβολής της φόρμας:

JQuery("form").submit(function() ( jQuery(window).unbind("beforeunload"); ... ));

Εάν η προβολή της φόρμας σας τις στέλνει σε άλλη σελίδα (που πιστεύω ότι είναι, δηλαδή εκτελείται πριν από τη λήψη), μπορείτε να δοκιμάσετε να αλλάξετε την προεκφόρτωση της φόρμας σε μια κλήση ajax. Με αυτόν τον τρόπο δεν θα φύγουν από τη σελίδα σας όταν η φόρμα έχει προηγηθεί εκφόρτωση και μπορείτε να χρησιμοποιήσετε τις συνδέσεις πριν από τη φόρτωση όπως θέλετε.

Δοκιμάστε και αυτό

Window.onbeforeunload = συνάρτηση () ( if (pasteEditorChange) ( var btn = επιβεβαίωση ("Θέλετε να αποθηκεύσετε την αλλαγή;"); if(btn === true)( SavetoEdit();//κλήση της συνάρτησής σας ) else ( windowClose();// your function call ) ) else ( windowClose();// your function call ) );

Μετά δούλεψε για μένα.

$(window).unload(function(event) ( if(event.clientY< 0) { //do whatever you want when closing the window.. } });

Χρησιμοποίησα το Slaks αλλά δεν λειτουργεί ως έχει επειδή το onbeforeunload returnValue αναλύεται ως συμβολοσειρά και στη συνέχεια εμφανίζεται στο παράθυρο επιβεβαίωσης του προγράμματος περιήγησης. Έτσι εμφανίζεται η τιμή true, για παράδειγμα "true".

Απλώς χρησιμοποιώντας ανατροφοδότηση. Εδώ είναι ο κωδικός μου

Var preventUnloadPrompt; var messageBeforeUnload = "το μήνυμά μου εδώ - Είστε βέβαιοι ότι θέλετε να φύγετε από αυτήν τη σελίδα;"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("κλικ", function() ( preventUnloadPrompt = true; )); $("form").live("submit", function() ( preventUnloadPrompt = true; )); $(window).bind("beforeunload", function(e) ( var rval; if(preventUnloadPrompt) ( return; ) else ( //location.replace(redirectAfterPrompt); return messageBeforeUnload; ) return rval; ))

Var validNavigation = false; jQuery(document).ready(function () ( wireUpEvents(); )); συνάρτηση endSession() ( // Η καρτέλα του προγράμματος περιήγησης ή του προγράμματος περιήγησης είναι κλειστή // Κάντε sth εδώ ... alert("bye"); ) function wireUpEvents() ( /* * Για μια λίστα συμβάντων που ενεργοποιούνται πριν από τη φόρτωση στον IE * ελέγξτε http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = συνάρτηση () ( εντοπισμός σφαλμάτων if (!validNavigation) ( endSession(); ) ) // Επισυνάψτε το Πατήστε το πλήκτρο συμβάντος για να εξαιρέσετε την ανανέωση F5 $(document).bind("keypress", συνάρτηση (e) ( εντοπισμός σφαλμάτων if (e.keyCode == 116) ( validNavigation = true; ) )); // Επισύναψη του συμβάντος κλικ για όλα σύνδεσμοι στη σελίδα $("a").bind("click", function () ( debugger validNavigation = true; )); // Επισύναψη της υποβολής συμβάντος για όλες τις φόρμες στη σελίδα $("form").bind( "submit", συνάρτηση () ( debugger validNavigation = true; )); // Επισύναψη του κλικ συμβάντος για όλες τις εισόδους στη σελίδα $("input").bind("click", function () ( debugger validNavigation = true; )); )"εισαγάγετε τον κωδικό εδώ".

Ίσως μπορείτε να χειριστείτε το OnSubmit και να ορίσετε μια σημαία που θα ελέγξετε αργότερα στο πρόγραμμα χειρισμού OnBeforeUnload.

JQuery(window).bind("beforeunload", συνάρτηση (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") (επιστροφή "Θέλετε πραγματικά να κλείσω?"; ) ))

Για μια λύση που λειτούργησε καλά με στοιχεία ελέγχου τρίτων όπως το Telerik (όπως το RadComboBox) και το DevExpress, τα οποία χρησιμοποιούν ετικέτες Anchor για διάφορους λόγους, σκεφτείτε τον ακόλουθο κώδικα, ο οποίος είναι μια ελαφρώς βελτιωμένη έκδοση του κώδικα desm με έναν καλύτερο επιλογέα για τον εαυτό της ετικέτα αγκύρωσης δεσμευτικό:

Var inFormOrLink; $("a:not(), a").live("κλικ", function() (inFormOrLink = true; )); $("form").bind("submit", function() (inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = απροσδιόριστο; if (! inFormOrLink) ( returnValue = " Θέλετε πραγματικά να κλείσετε;"; } eventObject.returnValue = returnValue; return returnValue; });!}

Η απάντησή μου στοχεύει στην παροχή απλών τεστ.

ΠΩΣ

Δείτε την απάντηση @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ; "Θέλετε πραγματικά να κλείσετε;" : null; ))

Πόσος χρόνος θα χρειαστεί για να κλείσει τελικά η σελίδα το πρόγραμμα περιήγησης;

Κάθε φορά που ο χρήστης κλείνει τη σελίδα (κουμπί x ή CTRL + W), το πρόγραμμα περιήγησης εκτελεί αυτόν τον κώδικα πριν από τη λήψη, αλλά όχι επ' αόριστον. Η μόνη εξαίρεση είναι το παράθυρο επιβεβαίωσης (επιστροφή "Θέλετε πραγματικά να κλείσετε;"), το οποίο θα περιμένει την απάντηση του χρήστη.

Chrome: 2 δευτερόλεπτα.
Firefox: ∞ (ή διπλό κλικ ή αναγκαστικό κλείσιμο)
Άκρη: ∞ (ή διπλό κλικ)
Explorer 11: 0 δευτερόλεπτα.
Σαφάρι: ΝΑ ΚΑΝΩ

Τι χρησιμοποιήσαμε για να το δοκιμάσουμε:

• Διακομιστής Node.js Express με αρχείο καταγραφής αιτημάτων
• Το παρακάτω σύντομο αρχείο HTML

Αυτό που κάνει είναι να στέλνει όσο το δυνατόν περισσότερα αιτήματα πριν το πρόγραμμα περιήγησης ολοκληρώσει τη σελίδα του (συγχρονισμένα).

function request() ( return $.ajax(( type: "GET", url: "http://localhost:3030/" + Date.now(), async: true )).responseText; ) window.onbeforeunload = ( ) => ( while (true) (​ request(); ) return null; )

Έξοδος Chrome:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /γεια σας/1480451322998 404 0,3328 δευτερόλεπτο / άθροισμα 5 ms. 2 δευτερόλεπτα αφού τα αιτήματα μπορεί να χρειαστούν μερικά χιλιοστά του δευτερολέπτου να σταλούν.

Για μια λύση μεταξύ προγραμμάτων περιήγησης (δοκιμασμένη σε Chrome 21, IE9, FF15), λάβετε υπόψη τον ακόλουθο κώδικα, ο οποίος είναι μια ελαφρώς τροποποιημένη έκδοση του κώδικα Slaks:

Var inFormOrLink; $("a").live("κλικ", function() (inFormOrLink = true; )); $("form").bind("submit", function() (inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = απροσδιόριστο; if (! inFormOrLink) ( returnValue = " Θέλετε πραγματικά να κλείσετε;"; } eventObject.returnValue = returnValue; return returnValue; }); !}

Σημειώστε ότι με τον Firefox 4 εμφανίζεται το μήνυμα «Είστε βέβαιοι ότι θέλετε να κλείσετε;». δεν εμφανίζεται. Το FF απλώς εμφανίζει ένα γενικό μήνυμα. Δείτε τη σημείωση στη διεύθυνση https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Το συμβάν πριν από τη φόρτωση ενεργοποιείται κάθε φορά που ένας χρήστης φεύγει από τη σελίδα σας για οποιονδήποτε λόγο.

Για παράδειγμα, θα ενεργοποιηθεί εάν ο χρήστης υποβάλει μια φόρμα, κάνει κλικ σε έναν σύνδεσμο, κλείσει ένα παράθυρο (ή καρτέλα) ή πλοηγηθεί σε ΝΕΑ ΣΕΛΙΔΑχρησιμοποιώντας τη γραμμή διευθύνσεων, το πλαίσιο αναζήτησης ή τον σελιδοδείκτη.

Var inFormOrLink; $("a").on("κλικ", function() (inFormOrLink = true; )); $("form").on("submit", function() (inFormOrLink = true; )); $(window).on("beforeunload", function() ( return inFormOrLink ; "Θέλετε πραγματικά να κλείσετε;" : null; ))

Για εκδόσεις jQuery παλαιότερες από 1.7, δοκιμάστε αυτό:

Var inFormOrLink; $("a").live("κλικ", function() (inFormOrLink = true; )); $("form").bind("submit", function() (inFormOrLink = true; )); $(window).bind("beforeunload", function() ( return inFormOrLink ; "Θέλετε πραγματικά να κλείσετε;" : null; ))

Η ζωντανή μέθοδος δεν λειτουργεί με την υποβολή συμβάντος, οπότε αν προσθέσετε νέα στολή, θα χρειαστεί επίσης να συνδέσετε έναν χειριστή σε αυτό.

Λάβετε υπόψη ότι εάν κάποιος άλλος διαχειριστής συμβάντων ακυρώσει την υποβολή ή την πλοήγηση, θα χάσετε το μήνυμα επιβεβαίωσης εάν το παράθυρο κλείσει πραγματικά αργότερα. Μπορείτε να το διορθώσετε καταγράφοντας την ώρα στα συμβάντα υποβολής και κλικ και ελέγχοντας εάν πριν από την εκφόρτωση απέχει περισσότερο από μερικά δευτερόλεπτα.

Απλά ελέγξτε...

Συνάρτηση wopen_close())( var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0") ; w.onunload = function() ( if (window.closed) ( alert("window κλειστό"); )else( alert("μόλις ανανεώθηκε"); ) ) )

Από το jQuery 1.7, η μέθοδος .live() έχει καταργηθεί. Χρησιμοποιήστε το .on() για να επισυνάψετε προγράμματα χειρισμού συμβάντων. Οι χρήστες παλαιότερων εκδόσεων του jQuery θα πρέπει να χρησιμοποιούν το .delegate() κατά προτίμηση από το .live()

$(window).bind("beforeunload", function() ( return true || confirm("Θέλετε πραγματικά να κλείσετε;"); ));

Καλό απόγευμα. Πρόσφατα δημοσίευσα ένα άρθρο για το πώς να το κάνω, αλλά πολλοί ζήτησαν να προσθέσουν ένα άρθρο με εφέ καθρέφτη, ώστε να εμφανίζεται ένα παράθυρο όταν ένας επισκέπτης φεύγει από τον ιστότοπο, δηλαδή όταν προσπαθεί να κλείσει τη σελίδα.

Σήμερα θα μιλήσουμε για αυτό το θέμα και θα σας δείξω μια απλή εφαρμογή.

Φυσικά, η συζήτηση σχετικά με το αν πρέπει ή όχι να προσθέσετε ένα κοντινό αναδυόμενο παράθυρο στον ιστότοπό σας δεν θα σταματήσει ποτέ. Κάποιοι λένε ότι υπάρχει μια ειδική θέση στην Κόλαση που προορίζεται για αυτούς που την προσθέτουν, ότι αυτό είναι εξοργιστικό, ότι αν αποφάσισα να φύγω, τότε θα φύγω και κανένα αναδυόμενο παράθυρο δεν θα με σταματήσει, αλλά μόνο θα με ενοχλήσει. Άλλοι λένε ότι αυτά τα αναδυόμενα παράθυρα αυξάνουν τις μετατροπές και λειτουργούν εξαιρετικά. Νομίζω ότι αξίζει να το δοκιμάσετε και στη συνέχεια, με βάση στατιστικά στοιχεία, να βγάλετε συγκεκριμένα συμπεράσματα σχετικά με τη θέση και το προϊόν σας.

Πώς να δημιουργήσετε ένα αναδυόμενο παράθυρο όταν κλείνετε μια σελίδα

Πράγματι, δεν έκανα άλλη κουβέντα και απλώς άλλαξα ελαφρώς το προηγούμενο άρθρο και πρόσθεσα μερικές γραμμές κώδικα javascript. Προηγουμένως, εμφανιζόταν ένα παράθυρο τρόπου λειτουργίας όταν επισκεφτήκατε για πρώτη φορά έναν ιστότοπο. Τώρα θα εμφανίζεται μόνο κατά την πρώτη επίσκεψη στον ιστότοπο (όταν ο δρομέας εγκαταλείψει την κύρια περιοχή του ιστότοπου και μετακινηθεί στην περιοχή της καρτέλας). Εάν ο χρήστης επισκεφτεί ξανά τον ιστότοπο, αυτό το παράθυρο δεν θα εμφανιστεί. Αυτό υλοποιείται με τον ίδιο ακριβώς τρόπο όπως στο προηγούμενο άρθρο, χρησιμοποιώντας cookies. Τα cookies αποθηκεύονται για 7 ημέρες, μπορείτε να καθορίσετε οποιαδήποτε ποσότητα κατά την κρίση σας.

Και όμως, δεν επισυνάπτουμε ένα συμβάν σε ένα κλικ στο σταυρό στην καρτέλα, αλλά απλώς ελέγχουμε τη θέση του δρομέα. Δεν μπλοκάρουμε το παράθυρο, τα κουμπιά κ.λπ., δεν απαιτούμε τίποτα, αλλά απλά δείχνουμε το παράθυρο.

Όπως και την προηγούμενη φορά, θα χρησιμοποιήσουμε το πρόσθετο jQuery arcticModal, που σημαίνει ότι θα συνδέσουμε το ίδιο το jQuery:

Και συνδέουμε το θέμα της προσθήκης, χρησιμοποιώ το τυπικό, αλλά μπορείτε να γράψετε το δικό σας:

Τώρα, για να λειτουργήσουν τα cookies μας, θα προσθέσουμε την προσθήκη cookies από το Yandex:

Και συνδέστε το σενάριο config.js με το ακόλουθο περιεχόμενο:

$(document).ready(function () ( if (!$.cookie("smartCookies")) ( $(document).mouseleave(function (e) ( function getWindow() ( $("offer").arcticmodal (( closeOnOverlayClick: true, closeOnEsc: true )); ); setTimeout(getWindow, 1); $.cookie("smartCookies", true, ( λήγει: 7, διαδρομή: "/" )); )); ); ) )

Αν διαβάσατε το τελευταίο άρθρο, παρατηρήσατε ότι τίποτα δεν έχει αλλάξει, εκτός από το ότι το σενάριο στο αρχείο config.js έχει αλλάξει ελαφρώς. Δηλαδή, απλώς εμφανίστηκε μια άλλη συνθήκη που ενεργοποιείται όταν ο δρομέας φεύγει από την περιοχή του ιστότοπου, δηλαδή βρίσκεται στην περιοχή των καρτελών.

Παρεμπιπτόντως, την τελευταία φορά ξέχασα να εξηγήσω τι σημαίνουν αυτές οι παράμετροι:

CloseOnOverlayClick: true, closeOnEsc: true

• closeOnOverlayClick - σας επιτρέπει να κλείνετε ένα παράθυρο όταν κάνετε κλικ σε οποιαδήποτε περιοχή έξω από το παράθυρο.
• closeOnEsc - κλείνει το παράθυρο όταν πατάτε Escape

Τώρα σχετικά με την ίδια τη διάταξη της σελίδας. Δεν έχει αλλάξει απολύτως τίποτα.

Η πρόταση, το έντυπο κ.λπ. θα είναι εδώ. Μπορείτε να εισαγάγετε μια φόρμα ή να προσφέρετε να σας ακολουθήσει στα κοινωνικά δίκτυα

Θα εξηγήσω λίγο. modalInner — περιτύλιγμα τροπικό παράθυρο, με εμφάνιση: κανένα στα στυλ. προσφορά είναι η κατηγορία του ίδιου του παραθύρου modal. Εάν το αλλάξετε, μην ξεχάσετε να αλλάξετε την τάξη στο σενάριο.

Ακολουθεί μια απλή υλοποίηση ενός αναδυόμενου παραθύρου κατά το κλείσιμο μιας σελίδας. Πιστεύετε ότι αξίζει να χρησιμοποιήσετε ένα παρόμοιο εφέ σε έναν ιστότοπο;

Το "onbeforeunload event δεν εμφανίζει κείμενο που παρέχεται από τον ιστότοπο, μόνο τυπικό μήνυμα", αν κρίνουμε από τα σχόλια, τελικά και αμετάκλητα. Από αυτή την άποψη, ήθελα να γράψω λίγο για την ιστορία του θέματος.

Πολλοί άνθρωποι γνωρίζουν ότι χάρη στο onbeforeunload, μπορείτε να ζητήσετε από τον χρήστη να μην εγκαταλείψει μια ιστοσελίδα εάν έχει μη αποθηκευμένα δεδομένα (για παράδειγμα, γραμμένα σε μια φόρμα, αλλά δεν έχει στείλει μήνυμα στο φόρουμ). Για να το κάνετε αυτό, απλώς προσθέστε κάτι σαν αυτό το JavaScript:
window.onbeforeunload = συνάρτηση (evt) ( var message = "Το έγγραφο "foo" δεν έχει αποθηκευτεί. Θα χάσετε τις αλλαγές εάν αποχωρήσετε από τη σελίδα."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = μήνυμα; ) επιστροφή μηνύματος;)
Μετά από αυτό, ιδανικά, εάν ο χρήστης επιθυμεί να φύγει από τη σελίδα (με οποιονδήποτε τρόπο - κλείστε την καρτέλα, κλείστε ολόκληρο το πρόγραμμα περιήγησης, φορτώστε ξανά τη σελίδα, εισαγάγετε νέα διεύθυνση V γραμμή διεύθυνσης, μεταβείτε σε σελιδοδείκτη κ.λπ.), θα δει ένα αίτημα επιβεβαίωσης και η έξοδος από τη σελίδα μπορεί να ακυρωθεί. Προηγουμένως, αδίστακτοι συντάκτες ιστότοπου προσπάθησαν να χρησιμοποιήσουν αυτό το παράθυρο για να ξεγελάσουν τον χρήστη και να τον κρατήσουν στη σελίδα, για παράδειγμα, χρησιμοποιώντας το κείμενο "Κάντε κλικ στο OK για να συνεχίσετε να εργάζεστε με τον ιστότοπο και στο Άκυρο για να κλείσετε" (στην πραγματικότητα, τα κουμπιά λειτούργησαν από κοντά). Ή ακόμα και κάτι πιο τρομακτικό όπως "Κάντε κλικ στο OK για να επιβεβαιώσετε τη χρέωση 1.000 $ στην πιστωτική σας κάρτα."

Στη συνέχεια, τα προγράμματα περιήγησης έγιναν σοφότερα και άρχισαν να προσθέτουν βοηθητικό κείμενο για να κάνουν πιο δύσκολο να εξαπατήσουν τον χρήστη. Για παράδειγμα, δείτε πώς το κάνει ο IE8:

Σχεδόν παρόμοιο κείμενο ήταν στον Firefox 3:


Αν τα διαβάσετε όλα, γίνεται σαφές τι ανέφερε ο ιστότοπος και τι ανέφερε το πρόγραμμα περιήγησης. Ωστόσο, μπορείτε ακόμα να εξαπατήσετε.

Εδώ βλέπουμε μια σαφή περιγραφή των ενεργειών απευθείας στα κουμπιά. Είναι ήδη αρκετά δύσκολο να πείσεις τον χρήστη να κάνει κλικ στο «Αποχώρηση» για να μείνει και στο «Μείνε» για να φύγει. Κατά τη γνώμη μου, η λύση είναι ιδανική και αυτό το θέμα μπορεί να κλείσει. Σε γενικές γραμμές, όπως γνωρίζετε, το απρόσωπο ΟΚ σε σχεδόν οποιοδήποτε παράθυρο διαλόγου θα πρέπει να αντικατασταθεί με το όνομα της ενέργειας (για παράδειγμα, "Διαγραφή αρχείων", "Αναζήτηση", "Προσθήκη γραμμής", "Άνοιγμα αρχείου" κ.λπ.), Αυτό μειώνει τον αριθμό των σφαλμάτων χρήστη, ακόμα κι αν έχετε τον πλήρη έλεγχο του κειμένου του διαλόγου.

Ποιο ήταν το δράμα με το bug 641509; Το γεγονός είναι ότι αυτή η επιβεβαίωση στον Firefox 4 και νεότερη έκδοση μοιάζει με αυτό:


Όπως φαίνεται, προσαρμοσμένο κείμενοεξαφανίστηκε τελείως. Από την έκδοση 4, ο ιστότοπος δεν μπορεί να παράσχει κανένα πρόσθετο μήνυμα στον χρήστη ή να εξηγήσει γιατί συγκεκριμένα δεν θέλει να φύγει ο χρήστης. Ας πούμε, εάν εφαρμόζετε μια διεπαφή για εργασία με πολλά έγγραφα σε ένα παράθυρο και ένα από αυτά δεν είναι αποθηκευμένο, θα μπορούσατε να πείτε ποιο συγκεκριμένα, αλλά στον Firefox δεν θα το καταλάβετε αυτό. Ίσως δεν θέλετε να το αποθηκεύσετε και αν βλέπατε το μήνυμα, θα έφευγατε ήρεμα από τη σελίδα, αλλά διαφορετικά δεν ξέρετε τι συμβαίνει. Στο φύλλο