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

חלון התראה שיוודא שהמשתמשים שלכם לא יאבדו מידע חשוב, כיצד לייצר pop up מותאם אישית משלכם ועל פי הצרכים שלכם?

אם אתם משתמשים בפייסבוק, בטח יצא לכם להקליד משהו ואז לנסות לסגור את הטאב עם ה-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 מופעל ואם לא, אז לא.

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

Screen Shot 2014-03-31 at 4.31.16 PM

הפוסט פורסם לראשונה בבלוג Internet Israel.

Avatar

רן בר-זיק

מתכנת מנוסה. בנוסף להיותי מתכנת, יש לי נסיון ככלכלן וכמנהל פרויקטים. בעל אתר אינטרנט ישראל המוקדש לפיתוח. אני נשוי ליעל ואב לארבעה ילדים – עומרי, כפיר, דניאל ומיכל.

הגב

2 תגובות על "unload event: איך, מתי, למה וכמה?"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
עופר
Guest

מספר הערות:

1. באחד המקומות יש typo – כתוב onbeforenload במקום onbeforenload.

2. ראוי לציין כי זהו אחד הדברים החיוביים הבודדים אותם תרמה מייקרוסופט לעולם ה-Web. ה-Event הזה הוא המצאה של מיקרוסופט, ובגלל התועלת שלו הוא אומץ ע”י הדפדפנים האחרים (הדבר השני שמיקרוסופט תרמה, שהוא אכן משמעותי מאוד לעולמינו, הוא AJAX).

טל
Guest

XHR*

wpDiscuz

תגיות לכתבה: