How can I override the OnBeforeUnload dialog and replace it with my own

Question

I need to warn users about unsaved changes before they leave a page  a pretty common problem   window onbeforeunload   handler  This works but it raises a default dialog with an irritating standard message that wraps my own text  I need to either completely replace the standard message  so my text is clear  or  even better  replace the entire dialog with a modal dialog using jQuery  So far I have failed and I haven t found anyone else who seems to have an answer  Is it even possible  Javascript in my page   lt script type  quot text javascript quot  gt         window onbeforeunload   closeIt   lt  script gt   The closeIt   function  function closeIt       if  changes     quot true quot     files     quot true quot             return  quot Here you can append a custom message to the default dialog  quot          Using jQuery and jqModal I have tried this kind of thing  using a custom confirm dialog     window  beforeunload function          confirm  new message      this href         this href       return false       which also doesn t work - I cannot seem to bind to the beforeunload event

User · Answer

Try placing a return  instead of a message   this is working most browsers for me   This only really prevents dialog s presents   window onbeforeunload   function evt                          Your Extra Code         return

User · Answer

Try placing a return  instead of a message   this is working most browsers for me   This only really prevents dialog s presents   window onbeforeunload   function evt                          Your Extra Code         return

User · Answer

1  Use onbeforeunload  not onunload   2  The important thing is to avoid executing a return statement  I don t mean  by this  to avoid returning from your handler  You return all right  but you do it by ensuring that you reach the end of the function and DO NOT execute a return statement  Under these conditions the built-in standard dialog does not occur   3  You can  if you use onbeforeunload  run an ajax call in your unbeforeunload handler to tidy up on the server  but it must be a synchronous one  and you have to wait for and handle the reply in your onbeforeunload handler  still respecting condition  2  above   I do this and it works fine  If you do a synchronous ajax call  everything is held up until the response comes back  If you do an asynchronous one  thinking that you don t care about the reply from the server  the page unload continues and your ajax call is aborted by this process - including a remote script if it s running

User · Answer

What about to use the specialized version of the  bind  command  one   Once the event handler executes the first time  it   s automatically removed as an event handler     window  one  beforeunload   BeforeUnload

User · Answer

You can t modify the default dialogue for onbeforeunload  so your best bet may be to work with it   window onbeforeunload   function         return  You have unsaved changes        Here s a reference to this from Microsoft      When a string is assigned to the returnValue property of window event  a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it  The default statement that appears in the dialog box   Are you sure you want to navigate away from this page      Press OK to continue  or Cancel to stay on the current page    cannot be removed or altered    The problem seems to be    When onbeforeunload is called  it will take the return value of the handler as window event returnValue  It will then parse the return value as a string  unless it is null   Since false is parsed as a string  the dialogue box will fire  which will then pass an appropriate true false    The result is  there doesn t seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue   Additional notes on jQuery    Setting the event in jQuery may be problematic  as that allows other onbeforeunload events to occur as well  If you wish only for your unload event to occur I d stick to plain ol  JavaScript for it  jQuery doesn t have a shortcut for onbeforeunload so you d have to use the generic bind syntax     window  bind  beforeunload   function            Edit 09 04 2018  custom messages in onbeforeunload dialogs are deprecated since chrome-51  cf  release note

User · Answer

lt script type  text javascript  gt          window onbeforeunload   function evt                var message    Are you sure you want to leave                if  typeof evt     undefined                     evt   window event                                   if  evt                    evt returnValue   message                            return message                  lt  script gt    refer from http   www codeprojectdownload com

User · Answer

Angular 9 approach   constructor         window addEventListener  beforeunload    event  BeforeUnloadEvent    gt         if  this generatedBarcodeIndex          event preventDefault       for Firefox       event returnValue          for Chrome       return                 return false                 Browsers support and the removal of the custom message    Chrome removed support for the custom message in ver 51 min Opera removed support for the custom message in ver 38 min Firefox removed support for the custom message in ver 44 0 min Safari removed support for the custom message in ver 9 1 min

User · Answer

While there isn t anything you can do about the box in some circumstances  you can intercept someone clicking on a link  For me  this was worth the effort for most scenarios and as a fallback  I ve left the unload event   I ve used Boxy instead of the standard jQuery Dialog  it is available here  http   onehackoranother com projects jquery boxy       input   change function         if  is dirty              When the user changes a field on this page  set our is dirty flag          is dirty   true                a   mousedown function e        if is dirty               if the user navigates away from this page via an anchor link                 popup a new boxy confirmation          answer   Boxy confirm  You have made some changes which you might want to save                window onbeforeunload   function     if  is dirty  amp  amp   answer                   call this if the box wasn t shown      return  You have made some changes which you might want to save               You could attach to another event  and filter more on what kind of anchor was clicked  but this works for me and what I want to do and serves as an example for others to use or improve  Thought I would share this for those wanting this solution   I have cut out code  so this may not work as is

User · Answer

You can t modify the default dialogue for onbeforeunload  so your best bet may be to work with it   window onbeforeunload   function         return  You have unsaved changes        Here s a reference to this from Microsoft      When a string is assigned to the returnValue property of window event  a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it  The default statement that appears in the dialog box   Are you sure you want to navigate away from this page      Press OK to continue  or Cancel to stay on the current page    cannot be removed or altered    The problem seems to be    When onbeforeunload is called  it will take the return value of the handler as window event returnValue  It will then parse the return value as a string  unless it is null   Since false is parsed as a string  the dialogue box will fire  which will then pass an appropriate true false    The result is  there doesn t seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue   Additional notes on jQuery    Setting the event in jQuery may be problematic  as that allows other onbeforeunload events to occur as well  If you wish only for your unload event to occur I d stick to plain ol  JavaScript for it  jQuery doesn t have a shortcut for onbeforeunload so you d have to use the generic bind syntax     window  bind  beforeunload   function            Edit 09 04 2018  custom messages in onbeforeunload dialogs are deprecated since chrome-51  cf  release note

User · Answer

This can t be done in chrome now to avoid spamming  refer to javascript onbeforeunload not showing custom message for more details

User · Answer

Angular 9 approach   constructor         window addEventListener  beforeunload    event  BeforeUnloadEvent    gt         if  this generatedBarcodeIndex          event preventDefault       for Firefox       event returnValue          for Chrome       return                 return false                 Browsers support and the removal of the custom message    Chrome removed support for the custom message in ver 51 min Opera removed support for the custom message in ver 38 min Firefox removed support for the custom message in ver 44 0 min Safari removed support for the custom message in ver 9 1 min

User · Answer

You can detect which button  ok or cancel  pressed by user  because the onunload function called only when the user choise leaveing the page  Althoug in this funcion the possibilities is limited  because the DOM is being collapsed  You can run javascript  but the ajax POST doesn t do anything therefore you can t use this methode for automatic logout  But there is a solution for that  The window open  logout php   executed in the onunload funcion  so the user will logged out with a new window opening   function onunload           window open  logout php        This code called when user leave the page or close the active window and user logged out by  logout php   The new window close immediately when logout php consist of code   window close

User · Answer

This can t be done in chrome now to avoid spamming  refer to javascript onbeforeunload not showing custom message for more details

User · Answer

You can t modify the default dialogue for onbeforeunload  so your best bet may be to work with it   window onbeforeunload   function         return  You have unsaved changes        Here s a reference to this from Microsoft      When a string is assigned to the returnValue property of window event  a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it  The default statement that appears in the dialog box   Are you sure you want to navigate away from this page      Press OK to continue  or Cancel to stay on the current page    cannot be removed or altered    The problem seems to be    When onbeforeunload is called  it will take the return value of the handler as window event returnValue  It will then parse the return value as a string  unless it is null   Since false is parsed as a string  the dialogue box will fire  which will then pass an appropriate true false    The result is  there doesn t seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue   Additional notes on jQuery    Setting the event in jQuery may be problematic  as that allows other onbeforeunload events to occur as well  If you wish only for your unload event to occur I d stick to plain ol  JavaScript for it  jQuery doesn t have a shortcut for onbeforeunload so you d have to use the generic bind syntax     window  bind  beforeunload   function            Edit 09 04 2018  custom messages in onbeforeunload dialogs are deprecated since chrome-51  cf  release note

User · Answer

While there isn t anything you can do about the box in some circumstances  you can intercept someone clicking on a link  For me  this was worth the effort for most scenarios and as a fallback  I ve left the unload event   I ve used Boxy instead of the standard jQuery Dialog  it is available here  http   onehackoranother com projects jquery boxy       input   change function         if  is dirty              When the user changes a field on this page  set our is dirty flag          is dirty   true                a   mousedown function e        if is dirty               if the user navigates away from this page via an anchor link                 popup a new boxy confirmation          answer   Boxy confirm  You have made some changes which you might want to save                window onbeforeunload   function     if  is dirty  amp  amp   answer                   call this if the box wasn t shown      return  You have made some changes which you might want to save               You could attach to another event  and filter more on what kind of anchor was clicked  but this works for me and what I want to do and serves as an example for others to use or improve  Thought I would share this for those wanting this solution   I have cut out code  so this may not work as is

User · Answer

1  Use onbeforeunload  not onunload   2  The important thing is to avoid executing a return statement  I don t mean  by this  to avoid returning from your handler  You return all right  but you do it by ensuring that you reach the end of the function and DO NOT execute a return statement  Under these conditions the built-in standard dialog does not occur   3  You can  if you use onbeforeunload  run an ajax call in your unbeforeunload handler to tidy up on the server  but it must be a synchronous one  and you have to wait for and handle the reply in your onbeforeunload handler  still respecting condition  2  above   I do this and it works fine  If you do a synchronous ajax call  everything is held up until the response comes back  If you do an asynchronous one  thinking that you don t care about the reply from the server  the page unload continues and your ajax call is aborted by this process - including a remote script if it s running

User · Answer

What worked for me  using jQuery and tested in IE8  Chrome and Firefox  is     window  bind  beforeunload  function event        if hasChanged  return  You have unsaved changes         It is important not to return anything if no prompt is required as there are differences between IE and other browser behaviours here

User · Answer

You can detect which button  ok or cancel  pressed by user  because the onunload function called only when the user choise leaveing the page  Althoug in this funcion the possibilities is limited  because the DOM is being collapsed  You can run javascript  but the ajax POST doesn t do anything therefore you can t use this methode for automatic logout  But there is a solution for that  The window open  logout php   executed in the onunload funcion  so the user will logged out with a new window opening   function onunload           window open  logout php        This code called when user leave the page or close the active window and user logged out by  logout php   The new window close immediately when logout php consist of code   window close

User · Answer

What about to use the specialized version of the  bind  command  one   Once the event handler executes the first time  it   s automatically removed as an event handler     window  one  beforeunload   BeforeUnload

User · Answer

lt script type  text javascript  gt          window onbeforeunload   function evt                var message    Are you sure you want to leave                if  typeof evt     undefined                     evt   window event                                   if  evt                    evt returnValue   message                            return message                  lt  script gt    refer from http   www codeprojectdownload com

User · Answer

I faced the same problem  I was ok to get its own dialog box with my message  but the problem I faced was   1  It was giving message on all navigations I want it only for close click   2  with my own confirmation message if user selects cancel it still shows the browser s default dialog box   Following is the solutions code I found  which I wrote on my Master page   function closeMe evt        if  typeof evt     undefined             evt   window event        if  evt  amp  amp  evt clientX  gt    window event screenX - 150   amp  amp          evt clientY  gt   -150  amp  amp  evt clientY  lt   0            return  Do you want to log out of your current session            window onbeforeunload   closeMe

User · Answer

You can t modify the default dialogue for onbeforeunload  so your best bet may be to work with it   window onbeforeunload   function         return  You have unsaved changes        Here s a reference to this from Microsoft      When a string is assigned to the returnValue property of window event  a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it  The default statement that appears in the dialog box   Are you sure you want to navigate away from this page      Press OK to continue  or Cancel to stay on the current page    cannot be removed or altered    The problem seems to be    When onbeforeunload is called  it will take the return value of the handler as window event returnValue  It will then parse the return value as a string  unless it is null   Since false is parsed as a string  the dialogue box will fire  which will then pass an appropriate true false    The result is  there doesn t seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue   Additional notes on jQuery    Setting the event in jQuery may be problematic  as that allows other onbeforeunload events to occur as well  If you wish only for your unload event to occur I d stick to plain ol  JavaScript for it  jQuery doesn t have a shortcut for onbeforeunload so you d have to use the generic bind syntax     window  bind  beforeunload   function            Edit 09 04 2018  custom messages in onbeforeunload dialogs are deprecated since chrome-51  cf  release note

User · Answer

I faced the same problem  I was ok to get its own dialog box with my message  but the problem I faced was   1  It was giving message on all navigations I want it only for close click   2  with my own confirmation message if user selects cancel it still shows the browser s default dialog box   Following is the solutions code I found  which I wrote on my Master page   function closeMe evt        if  typeof evt     undefined             evt   window event        if  evt  amp  amp  evt clientX  gt    window event screenX - 150   amp  amp          evt clientY  gt   -150  amp  amp  evt clientY  lt   0            return  Do you want to log out of your current session            window onbeforeunload   closeMe

User · Answer

What worked for me  using jQuery and tested in IE8  Chrome and Firefox  is     window  bind  beforeunload  function event        if hasChanged  return  You have unsaved changes         It is important not to return anything if no prompt is required as there are differences between IE and other browser behaviours here

[javascript] How can I override the OnBeforeUnload dialog and replace it with my own?

Examples related to javascript

Examples related to jquery

Examples related to onbeforeunload