javascript - Disable browser back action using jquery - Stack Overflow

admin管理员组

文章数量:1405506

I am developing an online testing app and it is required that during the test, users cannot be allowed to refresh page neither go back until the test is ended. I have successfully been able to disable refresh action in jquery through all means possible (to the best of my knowledge) using the following code:

$(window).bind({
  beforeunload: function(ev) {
    ev.preventDefault();
  },
  unload: function(ev) {
    ev.preventDefault();
  }
});

But I have been having troubles disabling the back action on all browsers, the best solution I got on SO conflicts with the code I have above, it is given below:

window.onload = function () {
  if (typeof history.pushState === "function") {
      history.pushState("jibberish", null, null);
      //alert("Reloaded");
      window.onpopstate = function () {
          history.pushState('newjibberish', null, null);
          // Handle the back (or forward) buttons here
          // Will NOT handle refresh, use onbeforeunload forthis.
      };
  }
  else {
      var ignoreHashChange = true;
      window.onhashchange = function () {
          if (!ignoreHashChange) {
              ignoreHashChange = true;
              window.location.hash = Math.random();
              // Detect and redirect change here
              // Works in older FF and IE9
              // * it does mess with your hash symbol (anchor?) pound sign
              // delimiter on the end of the URL
          }
          else {
              ignoreHashChange = false;
          }
      };
    }
  }

The solution above suits my purpose in disabling the back button but conflicts with the page refresh prevention handler above. I am out of ideas on what to do and I have also searched a long time for a solution to this but found none yet. Any help would be greatly appreciated, even if it takes a totally different approach to solving the problem, I wouldn't mind at all. Thanks everyone

UPDATE

I never realized that doing things this way breaks a lot of ethical rules, anyway, I've thought about it and figured out something else to do when if the page is refreshed or back button pressed (either using keyboard or the browser controls). I want to redirect to a url which will end the current exam session. I believe that's possible, hence I think the solution I seek is to get the best way to achieve this. Redirecting to another url if back button or refresh button is pressed (both using the browser controls and the keyboard).

I am developing an online testing app and it is required that during the test, users cannot be allowed to refresh page neither go back until the test is ended. I have successfully been able to disable refresh action in jquery through all means possible (to the best of my knowledge) using the following code:

$(window).bind({
  beforeunload: function(ev) {
    ev.preventDefault();
  },
  unload: function(ev) {
    ev.preventDefault();
  }
});

But I have been having troubles disabling the back action on all browsers, the best solution I got on SO conflicts with the code I have above, it is given below:

window.onload = function () {
  if (typeof history.pushState === "function") {
      history.pushState("jibberish", null, null);
      //alert("Reloaded");
      window.onpopstate = function () {
          history.pushState('newjibberish', null, null);
          // Handle the back (or forward) buttons here
          // Will NOT handle refresh, use onbeforeunload forthis.
      };
  }
  else {
      var ignoreHashChange = true;
      window.onhashchange = function () {
          if (!ignoreHashChange) {
              ignoreHashChange = true;
              window.location.hash = Math.random();
              // Detect and redirect change here
              // Works in older FF and IE9
              // * it does mess with your hash symbol (anchor?) pound sign
              // delimiter on the end of the URL
          }
          else {
              ignoreHashChange = false;
          }
      };
    }
  }

The solution above suits my purpose in disabling the back button but conflicts with the page refresh prevention handler above. I am out of ideas on what to do and I have also searched a long time for a solution to this but found none yet. Any help would be greatly appreciated, even if it takes a totally different approach to solving the problem, I wouldn't mind at all. Thanks everyone

UPDATE

I never realized that doing things this way breaks a lot of ethical rules, anyway, I've thought about it and figured out something else to do when if the page is refreshed or back button pressed (either using keyboard or the browser controls). I want to redirect to a url which will end the current exam session. I believe that's possible, hence I think the solution I seek is to get the best way to achieve this. Redirecting to another url if back button or refresh button is pressed (both using the browser controls and the keyboard).

• javascript
• jquery
• browser

Share Improve this question Follow edited Oct 8, 2016 at 18:05 mikaelovi asked Oct 8, 2016 at 13:28 mikaelovimikaelovi 13144 silver badges1111 bronze badges 8

• Since when preventing beforeunload or unload event disable page refreshing??? Do i miss something here?! – A. Wolff Commented Oct 8, 2016 at 13:32
• 1 You can't stop the user from redirecting, going back or refreshing the page, it would be annoying to users, and cause problems if browsers allowed it. – adeneo Commented Oct 8, 2016 at 13:34
• @A.Wolff, I can't really tell how or why it works, I found it on SO and tried it, then it works, however, I like to develop adhering to best practices, hence pointing me to d right thing will be of great help. – mikaelovi Commented Oct 8, 2016 at 13:40
• @adeneo like I mentioned in my question, it is a requirement for the test while in session, so this is not really about user experience/convenience – mikaelovi Commented Oct 8, 2016 at 13:42
• The thing is, the code you have shouldn't work at all. You can't prevent the unload events, as that would make it possible for malicious sites to just lock you in on their page. It's not just about user experience, it's about users being able to leave when they feel like it. – adeneo Commented Oct 8, 2016 at 13:51

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

I have tried many options but none worked except this-

//Diable Browser back in all Browsers
if (history.pushState != undefined) {
history.pushState(null, null, location.href);
}
history.back();
history.forward();
window.onpopstate = function () {
history.go(1);
};

With regards to the update I posted in my question, I have been able to solve my problem. Here's what I did (just modifying my existing code a little and removing the window.onload listener I had initially):

$(window).bind({
  beforeunload: function(ev) {
    window.location.replace("my_url_goes_in_here");
  },
  unload: function(ev) {
    window.location.replace("my_url_goes_in_here");
  }
});

This construct works for both page refresh and back actions done in anyway (either using keyboard or browser controls for the any of them).

However, I've not yet tested in any other browser other than firefox 47.0, but I'm glad it's working for now all the same. Thanks for all your ments, they were extremely helpful

In my case I want to disable back click in chrome browser. I tried many methods, Finally I got from https://www.geeksforgeeks/how-to-disable-browser-back-button-using-jquery/

<script src="https://code.jquery./jquery-3.6.0.min.js"></script>
<script> 
    $(document).ready(function() { 
        function disableBack() { 
            window.history.forward() 
        } 
        window.onload = disableBack(); 
        window.onpageshow = function(e) { 
            if (e.persisted) 
                disableBack(); 
        } 
    }); 
</script> 

Using javascript if you have two pages page1 and page2 and (page1 redirect to page2) and you want to restrict the user from getting back to page1, just put this code at page1.

 <script src="http://ajax.googleapis./ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            function disableBack() {
                window.history.forward()
            }

            window.onload = disableBack();
            window.onpageshow = function (evt) {
                if (evt.persisted)
                    disableBack()
            }
        });
    </script>

本文标签： javascriptDisable browser back action using jqueryStack Overflow