使用jQuery禁用浏览器后退操作 [英] Disable browser back action using jquery

问题描述

我正在开发一个在线测试应用程序，并且要求在测试过程中，不允许用户刷新页面，也不能返回页面，直到测试结束.使用以下代码，就我所知，我已经能够通过所有可能的方法成功禁用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

更新

我从来没有意识到以这种方式进行操作会违反许多道德规则，无论如何，我已经考虑过这一问题，并且想出了在刷新页面或按下后退按钮(使用键盘或浏览器)时要采取的其他措施控件).我想重定向到将结束当前考试会话的URL.我相信这是可能的，因此我认为我寻求的解决方案是获得实现此目标的最佳方法.如果按下了后退按钮或刷新按钮(使用浏览器控件和键盘)，则重定向到另一个URL.

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

推荐答案

关于我在问题中发布的更新，我已经能够解决我的问题.这就是我所做的(只需稍微修改现有代码并删除我最初拥有的window.onload监听器):

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

但是，除Firefox 47.0之外，我尚未在其他任何浏览器中进行过测试，但我很高兴它现在可以正常使用. 感谢您的所有评论，它们对我们非常有帮助

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

这篇关于使用jQuery禁用浏览器后退操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！