שימוש בפקודת OnBeforeUnload לוידוא יציאה של המשתמש

 

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

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

אני החלטתי שבמערכת שלי אני רוצה לעזור למשתמש ולשאול אותו, האם הוא בטוח שהוא רוצה לצאת מהדף, חיפשתי קצת באינטרנט ומצאתי את פקודת ה-Javascript החביבה: OnBeforeUnload.

השם הארוך הזה, הוא למעשה Event, שמבצע קריאה לפונקציה כאשר המשתמש מנסה לצאת מהדף (לא משנה אם לחץ על כפתור Back, על לינק בדף או אפילו לחץ על סגירת הדפדפן), הפונקציה שמתלווה ל-Event יכולה להחזיר מחרוזות או ערך בוליאני (true או false).

הוסיפו את הקוד הבא לדף HTML, וכך הדפדפן יציג שאלה למשתמש לפני סגירת הדף:

1
2
3
<script type="text/javascript">
      window.onbeforeunload = function(){ return 'כל המידע שלא נשמר יאבד!';}
</script>

שימו לב שהטקסט בעברית ("כל המידע שלא נשמר יאבד!"), הוא טקסט שיתווסף להודעה הקבועה של הדפדפן במבנה הבא:

עזרו למשתמש שלכם למנוע טעות

עזרו למשתמש שלכם למנוע טעות

בבדיקתי אם הדפדפנים השונים, chrome ו-Safari לא תמכו בהודעות בעברית.
שימו לב שאופרה מאז ומתמיד לא תמכה ב-OnBeforeUnload, כך שהקוד הנ"ל לא יעבוד בדפדפן אופרה כלל.

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

אשמח לשמוע, איפה אתם מצאתם שימוש לקוד הזה?

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
שחרNo Gravatar 18 בנובמבר

ניתן לשלוח עם זה גם POST בAJAX או שיש סיכוי שהדף יסגר לפני שהHTTP REQUEST מסתיים?

[תגובה]

אורן רוט

שאלה מעניינת, לדעתי זה יעבוד.
נראה לי שהוא קודם ישלח את הבקשה ורק אח"כ נסגר.

שווה לבדוק…

[תגובה]

אלכס

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

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

[תגובה]

ערןNo Gravatar 16 בדצמבר

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

בקוד הזה זה אפשרי-
function confirmSubmit()
{
var agree=confirm("האם אתה בטוח שברצונך למחוק את תגובתך מהפורום?");
if (agree)
return true ;
else
return false ;
}
// –>

[תגובה]

אורן רוט

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

הסקריפט שלך באמת עונה על צורך אחר של מחיקת פריטים וכו… תודה על הסקריפט :)

[תגובה]

אלכסNo Gravatar 7 ביוני

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

[תגובה]

שיביNo Gravatar 18 באוגוסט

ידוע אך עדיין שימושי. תודה על השיתוף

[תגובה]

בניית אתריםNo Gravatar 10 בספטמבר

חשוב לא לבצע פעולות הכרחיות בפונקציה זו מפני שמשתמש יכול לבטל JAVASCRIPT.
לפעמים אי אפשר לבצע זאת בדרך אחרת, אבל איפה שאפשר עדיף להתחמק מזה

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון