unload event – איך, מתי, למה וכמה?

אם אתם משתמשים בפייסבוק, בטח יצא לכם להקליד משהו ואז לנסות לסגור את הטאב עם ה-X. ואם לא יצא לכם, נסו לעשות את זה עכשיו. מה שתקבלו זה חלון יפה כזה:

החלון הזה הוא בגרסת הפיירפוקס, אבל אם אתם משתמשים בדפדפן אחר כמו כרום, ספארי או אופרה – תקבלו גרסאות שונות של החלון הזה. איך גורמים לחלון הזה להפתח? הרי באופן עקרוני סגירת הטאב (או הקלדה של כתובת אחרת בשורת הכתובת ולחיצה על אנטר) הם אירועים חיצוניים ל-DOM ולכאורה ל-JavaScript החביב לא אמורה להיות שום גישה אליהם.

עם unload event יש לנו אפשרות להקפיץ pop up כזה עם טקסט משלנ. איך עושים את זה? באמצעות שימוש ב-onbeforenload. האירוע הזה רץ מילישניה לפני שהמשתמש עובד דף (אך עדיין הוא לא עבר, וזה משהו מאוד חשוב) ויכול להתריע בפני המשתמש שהוא עלול לאבד מידע חשוב. איך זה עובד? מאוד פשוט:

window.onbeforeunload = function(e) {
  return 'Dialog text here.';
};

אם אנחנו רוצים לעשות דברים אחרים ולאו דווקא להקפיץ משהו למשתמש, אנחנו יכולים להחזיר null. במידה ואנחנו מחזירים null, לא יקפוץ דיאלוג. כך למשל אפשר לבצע בדיקה אם באמת יש למשתמש מידע שלא נשמר ועלול ללכת לאיבוד. במידה ולא – להחזיר null והמשתמש יצא ללא כל הפרעה נוספת.

כמובן שצריך ועדיף להשתמש בזה אם אשכרה המשתמש עלול לאבד מידע ולא לצרכים נלוזים אחרים כמו הצעות שיווקיות עלובות בדקה ה-99.

אם אתם לא רוצים ללכלך את הידיים בבדיקות אם המשתמש הכניס משהו לאחד הטפסים אצלנו בדף, אנחנו יכולים להשתמש בתוסף של jQuery שנקרא AreYouSure – בגדול ממש קל ונעים להשתמש בו. איך עושים את זה? יש לו הסברים מצוינים בדף, אבל בגדול זה שם הטופס שאחריו אנחנו רוצים ‘לעקוב’ – או יותר נכון, אנחנו חוששים שבו יהיה מידע שהמשתמש שכח להכניס ושם הפונקציה areYouSure – זה הכל. יש אפשרויות וכו’ וכו’ וכו’. ככה זה נראה:

    // Enable on all forms
    $('form').areYouSure();

    // Enable on selected forms
    $('form.dirty-check').areYouSure();

    // With a custom message
    $('form').areYouSure( {'message':'Your profile details are not saved!'} );

אם המשתמש ישנה איזשהו שדה בטופס הזה ואז ינסה לצאת – הוא יקבל התראה.

חלק מכם ישימו לב שאם הם מנסים לצאת מפייסבוק לא על ידי לחיצה על ה-X או סגירת הטאב אלא על ידי לחיצה על קישור פנימי – זה מה שהם יקבלו:

הפעם החלון הזה מעוצב. איך זה עובד? כיוון שמדובר באירוע פנימי, אני יכול לתפוס את הלחיצה על הקישור ולהקפיץ modal חביב שאותו אני יכול כמובן לעצב כרצוני. כאן אני לא עובד דרך onbeforeunload אלא דרך אירוע קליק רגיל. החוכמה היא כמובן לעשות את הדברים הבאים:

• להקפיץ חלון מעוצב בלחיצה על קישור שהוא לא קישור אג’אקסי כלשהו אלא קישור למקום אחר.
• אם המשתמש לחץ על אישור בחלון המעוצב לזכור שלא להפעיל את areyousure
• במידה והמשתמש מנסה לסגור את הטאב, להפעיל את areyousure

את זה אפשר לעשות בקלות אם משתמשים ב-fork שלי ל-AreYouSure (המפתח המקורי, מתישהו, יאחד בין הגרסה שלו לגרסה שלי בתקווה). בגרסה שלי הוספתי מתודה שרצה לפני ה-onbeforeunload ושאפשר לקרוא לה. שם המתודה הוא before_unload_callback ואם היא מחזירה true אז ה-onbeforeunload מופעל ואם לא, אז לא.

איך זה עובד? ככה זה עובד באתר שמחקה את ההתנהגות של פייסבוק. שמתי הסברים בקוד:

//calling are-you-sure
$('#my-adv-form').areYouSure({before_unload_callback: function() {
    if(window.unload_source != 'anchor') { //if it is no anchor generated unload, proceed
        return true;
    }
}});
$('a').on('click', function() { //implementing the themed modal behavior. just like facebook
    if($(this).first().data('events').click.length == 1) { //if we don't have anu other event than one click
        window.unload_source = 'anchor';
        window.unload_target = $(this).attr('href');
        $('#unload_modal').modal(); //creating the modal
        return false; //we don't want the link to work
    }
});
$('#unload_modal_ok').on('click', function() {  //handling the themed unload modal "Yes"
    window.location.href = window.unload_target;
    return false; 
});

זהו, פשוט קל וגם נעים 🙂