Disable browser back action using jquery

问题:

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).

回答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 comments, they were extremely helpful

回答2:

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);
};

回答3:

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.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis.com/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>