Using OnBeforeUnload to confirm user’s relocationing
When creating a simple interface that aims to be user-friendly, we of course need to help users to do the right actions, but also prevent them from doing mistakes. A user can be very frustrated when an application does an action he didn’t mean to do, especially if he doesn’t have any tools for undoing it.
Today I will give you a code for one of the more familiar techniques, which is the pop-up question that asks you “ARE YOU SURE??” whenever you try to navigate away from the page.
These days I am working on a content manager system using Zend Framework. As part of the Content Manager I have also built a section that edits web pages (of course). The page is built from different text boxes, and the main part is the content text box, which is a text area where we edit the main content of the page.
You are probably familiar with the situation where you have entered a lot of information to some web page, accidentally pushed on a button which relocated you and lost all of the data that you have entered only to realize it will not come back.
I decided that in my editing application I want to help the user and ask him – Are you sure you want to navigate away from this page. So I searched the web and found the lovely JavaSctript component: OnBeforeUnload.
Behind the long name is actually an Event, which calls a function when the user is trying to navigate from the page (it doesn’t matter if the user clicked on the ‘Back’ button, an href link or even tried to close the browser). The function that goes with the Event can return a string or a boolean (true/false).
Add the next code into your HTML page, and the user will be prompted with a question before closing the page:
1 2 3 | <script type="text/javascript"> window.onbeforeunload = function(){ return 'Any unsaved data will be lost!';} </script> |
Keep in mind that the text returned will be added to the browser’s default message, i.e.:
“Are you sure you want to navigate away from this page?
Any unsaved data will be lost!”
This code will work in most browser, but when I checked Oprah it didn’t support the OnBeforeUnload event at all.
I added this code to pages that are made for editing, and in many cases I saved a lot of precious data.
שתפו את הפוסט הזה:
טפסים? למי זה חשוב? —פיהוק—
סיכום של יום השימושיות
אריאל במאמר 
אורן רוט במאמר 
עופר במאמר
ניתן לשלוח עם זה גם POST בAJAX או שיש סיכוי שהדף יסגר לפני שהHTTP REQUEST מסתיים?
[תגובה]
אורן רוט
24 בNovember
שאלה מעניינת, לדעתי זה יעבוד.
נראה לי שהוא קודם ישלח את הבקשה ורק אח”כ נסגר.
שווה לבדוק…
[תגובה]
אלכס
7 בJune
זה בהחלט יעבוד, בעיקר כשכמות הנתונים יחסית קטנה — הבקשה תספיק להגיע לשרת בזמן שהמשתמש מגיב לחלון שקפץ. יכול להיות שכבר לא יהיה לך זמן לטפל בתשובה של השרת.
אם התוכן רב מידי והמשתמש מהיר יחסית, הדפדפן יפסיק את שליחת הנתונים באמצע והנתונים לא יגיעו לשרת.
[תגובה]
שלום אורן,הפונקציה היא נחמדה אך ברוב המקרים יש צורך להתאים את הג’אווה סקריפט לכפתור ספציפי בדף או לינק ספציפי בתוך הדף ולא לכל הדף עצמו שיכול “להציק” למשתמש.
בקוד הזה זה אפשרי-
function confirmSubmit()
{
var agree=confirm(“האם אתה בטוח שברצונך למחוק את תגובתך מהפורום?”);
if (agree)
return true ;
else
return false ;
}
// –>
[תגובה]
אורן רוט
16 בDecember
הסקריפט שנתתי הוא לדפים שבהם למשל מנהלים תוכן או לחלופין בדף שליחת מייל. בדפים אלה אתה רוצה לשלוח הודעה בכל מצב בו המשתמש מנסה לצאת מהדפדפן.
הסקריפט שלך באמת עונה על צורך אחר של מחיקת פריטים וכו… תודה על הסקריפט
[תגובה]
מאוד נוח להשתמש בזה כדי לשמור על נתונים בקוקי, כיוון שבמקרה הזה אתה לא תלוי במהירות החיבור של המשתמש ולא צריך לפחד שהנתונים יגיעו/לא יגיעו לשרת.
[תגובה]
ידוע אך עדיין שימושי. תודה על השיתוף
[תגובה]
חשוב לא לבצע פעולות הכרחיות בפונקציה זו מפני שמשתמש יכול לבטל JAVASCRIPT.
לפעמים אי אפשר לבצע זאת בדרך אחרת, אבל איפה שאפשר עדיף להתחמק מזה
[תגובה]