אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » unload event – איך, מתי, למה וכמה?

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

רן בר-זיק מרץ 30, 2014 8:20 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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


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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד