Prevent any form of page refresh using jQuery Javascript

Question

Once the user is on my page  I do not want him to refresh the page   Anytime  the user hits F5 or refresh button on top  He should get an alert saying  You cannot refresh the page    Also if the user opens a new tab and tries to access the same url in prev tab he should get an alert  You cannot open same page in 2 tabs    Anyway I can do this using JavaScript or jQuery  Point one is really important

User · Answer

Although its not a good idea to disable F5 key you can do it in JQuery as below.

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
     $(document).on("keydown", disableF5);
});
</script>

Hope this will help!

User · Answer

No  there isn t   I m pretty sure there is no way to intercept a click on the refresh button from JS  and even if there was  JS can be turned off   You should probably step back from your X  preventing refreshing  and find a different solution to Y  whatever that might be

User · Answer

Back in the ole days of CGI we had many forms that would trigger various backend actions   Such as text notifications to groups  print jobs  farming of data  etc   If the user was on a page that was saying  Please wait    Performing some HUGE job that could take some time      They were more likely to hit REFRESH and this would be BAD   WHY   Because it would trigger more slow jobs and eventually bog down the whole thing   The solution  Allow them to do their form  When they submit their form    Start your job and then direct them to another page that tells them to wait   Where the page in the middle actually held the form data that was needed to start the job  The WAIT page however contains a javascript history destroy    So they can RELOAD that wait page all they want and it will never trigger the original job to start in the background as that WAIT page only contains the form data needed for the WAIT itself   Hope that makes sense   The history destroy function also prevented them from clicking BACK and then refreshing as well   It was very seamless and worked great for MANY MANY years until the non-profit was wound down   Example  FORM ENTRY - Collect all their info and when submitted  this triggers your backend job   RESPONSE from form entry - Returns HTML that performs a redirect to your static wait page and or POST GET to another form  the WAIT page      WAIT PAGE - Only contains FORM data related to wait page as well as javascript to destroy the most recent history   Like  -1 OR -2  to only destroy the most recent pages  but still allows them to go back to their original FORM entry page   Once they are at your WAIT page  they can click REFRESH as much as they want and it will never spawn the original FORM job on the backend    Instead  your WAIT page should embrace a META timed refresh itself so it can always check on the status of their job    When their job is completed  they are redirected away from the wait page to whereever you wish   If they do manually REFRESH    They are simply adding one more check of their job status in there   Hope that helps  Good luck

User · Answer

Number  2  is possible by using a socket implementation  like websocket  socket io  etc   with a custom heartbeat for each session the user is engaged in   If a user attempts to open another window  you have a javascript handler check with the server if it s ok  and then respond with an error messages   However  a better solution is to synchronize the two sessions if possible like in google docs

User · Answer

You can t prevent the user from refreshing  nor should you really be trying   You should go back to why you need this solution  what s the root problem here    Start there and find a different way to go about solving the problem   Perhaps is you elaborated on why you think you need to do this it would help in finding such a solution   Breaking fundamental browser features is never a good idea  over 99 999999999  of the internet works and refreshes with F5  this is an expectation of the user  one you shouldn t break

User · Answer

Issue  2 now can be solved using BroadcastAPI   At the moment it s only available in Chrome  Firefox  and Opera   var bc   new BroadcastChannel  test channel     bc onmessage   function  ev         if ev data  amp  amp  ev data url   window location href          alert  You cannot open the same page in 2 tabs             bc postMessage window location href

User · Answer

1 can be implemented via window onbeforeunload    For example     lt script type  text javascript  gt      window onbeforeunload   function             return  Dude  are you sure you want to leave  Think of the kittens           lt  script gt    The user will be prompted with the message  and given an option to stay on the page or continue on their way  This is becoming more common  Stack Overflow does this if you try to navigate away from a page while you are typing a post  You can t completely stop the user from reloading  but you can make it sound real scary if they do     2 is more or less impossible  Even if you tracked sessions and user logins  you still wouldn t be able to guarantee that you were detecting a second tab correctly  For example  maybe I have one window open  then close it  Now I open a new window  You would likely detect that as a second tab  even though I already closed the first one  Now your user can t access the first window because they closed it  and they can t access the second window because you re denying them    In fact  my bank s online system tries real hard to do  2  and the situation described above happens all the time  I usually have to wait until the server-side session expires before I can use the banking system again

[javascript] Prevent any form of page refresh using jQuery/Javascript

Examples related to javascript

Examples related to jquery

Examples related to refresh