如果你使用React，你可以使用NPM模块:use-history-back-trap。这是一个自定义的React钩子，它拦截向后导航，并允许在需要时恢复它。

用法超级简单:

const SomeFunctionalReactComponent = () => {
   useHistoryBackTrap(approveNavigation)
   // ...
}

其中approveNavigation是你的函数，当你想继续向后导航时，它返回true(或Promise)。

你可以放一个小脚本，然后检查。它将不允许您访问前一页。

这是用JavaScript完成的。

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

窗外。Onunload函数当您试图通过浏览器访问返回或上一页时触发。

非常简单和干净的函数打破向后箭头，而不干扰页面之后。

好处:

Loads instantaneously and restores original hash, so the user isn't distracted by URL visibly changing. The user can still exit by pressing back 10 times (that's a good thing), but not accidentally No user interference like other solutions using onbeforeunload It only runs once and doesn't interfere with further hash manipulations in case you use that to track state Restores original hash, so almost invisible. Uses setInterval, so it doesn't break slow browsers and always works. Pure JavaScript, does not require HTML5 history, works everywhere. Unobtrusive, simple, and plays well with other code. Does not use unbeforeunload which interrupts user with modal dialog. It just works without fuss.

注意:其他一些解决方案使用onbeforeunload。请不要为此目的使用onbeforeunload，当用户试图关闭窗口、点击反向箭头等时，onbeforeunload会弹出一个对话框。像onbeforeunload这样的情态动词通常只适用于很少的情况，比如当它们实际上在屏幕上做了更改并且没有保存它们时，不是为了这个目的。

工作原理

在页面加载时执行 保存您的原始散列(如果URL中有一个)。 依次追加#/noop/{1..10}到哈希 恢复原始哈希

就是这样。没有更多的混乱，没有后台事件监控，没有其他。

在一秒钟内使用它

要部署，只需在页面或JavaScript代码中添加这个:

<script>
    /* Break back button */
    window.onload = function(){
      var i = 0;
      var previous_hash = window.location.hash;
      var x = setInterval(function(){
        i++;
        window.location.hash = "/noop/" + i;
        if (i==10){
          clearInterval(x);
          window.location.hash = previous_hash;
        }
      }, 10);
    }
</script>

我遇到了这个问题，需要一个在各种浏览器上正确工作的解决方案，包括Mobile Safari(在发布时是iOS 9)。没有一个解决方案是完全正确的。我提供以下建议(在Internet Explorer 11、Firefox、Chrome和Safari上进行了测试):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

注意事项:

history.forward() (my old solution) does not work on Mobile Safari --- it seems to do nothing (i.e., the user can still go back). history.pushState() does work on all of them. the third argument to history.pushState() is a url. Solutions which pass a string like 'no-back-button' or 'pagename' seem to work OK, until you then try a Refresh/Reload on the page, at which point a "Page not found" error is generated when the browser tries to locate a page with that as its URL. (The browser is also likely to include that string in the address bar when on the page, which is ugly.) location.href should be used for the URL. the second argument to history.pushState() is a title. Looking around the web most places say it is "not used", and all the solutions here pass null for that. However, in Mobile Safari at least, that puts the page's URL into the history dropdown the user can access. But when it adds an entry for a page visit normally, it puts in its title, which is preferable. So passing document.title for that results in the same behaviour.

这是另一种方法。我们可以添加简短的SessionStorage条件，而不是仅仅尝试避免Back按钮功能(它不可靠地工作)。

假设我们有三个不同的页面(page1、page2和page3)。在每个页面上，我们都有一个链接，点击进入下一个页面，我们不希望用户能够回到上一页。

在第一个页面(page1.html)，我们创建了一个SI (sessionStorage Item)与一个虚拟的“prev”代码和另一个与“page1”代码(SI“now”):

  PAGE 1  <button onclick="goto()">PAGE 2</button>

  -------------------

  let thispage = '1' // Or 123456 if preferred or make sense

  // You can replace this fixed 'thispage' value on each page with a script counting the clicks
  // or any other way to increase its value, i.e., thispage++
  // or what you want, even counting the url.length (lol)

  sessionStorage.setItem('prev', '0') // Dummy code
  sessionStorage.setItem('now', thispage)

  // You can here make this page unreachable with page2/page3 SI same conditions

  function goto(){
      window.location = "page2.html"
  }

在page2.html上，我们使用通常的NoBack脚本(如果它有效的话)，只在来自page1时更新si:

  PAGE 2  <button onclick="goto()">PAGE 3</button>

  -------------------

  // If it works, let it work :-)

  history.pushState(null, null, location.href);
  history.back();
  history.forward();
  window.onpopstate = function () {
      history.go(1);
  };

  // else

  let thispage = '2' // 456789
  let thisprev = sessionStorage.getItem('now')
  if(sessionStorage.getItem('prev')==thispage) {
      console.log('USER is back on PAGE 2')
      setTimeout(function() { goto() }, 1000); // Remove log + setTimeout
  }
  if(thisprev !== thispage) {
      if(thisprev < thispage) {
          console.log('USER is coming from PAGE 1')
          sessionStorage.setItem('prev', thisprev)
          sessionStorage.setItem('now', thispage)
      }
      else {
          console.log('USER try to reload this page')
          setTimeout(function() { goto() }, 1000);
      }
  }

  function goto(){
      window.location = "page3.html"
  }

在page3.html上:

  PAGE 3  <button onclick="goto()">BACK TO PAGE 1</button>

  -------------------

  history.pushState(null, null, location.href);
  history.back();
  history.forward();
  window.onpopstate = function () {
      history.go(1);
  };

  let thispage = '3' // 999999
  let thisprev = sessionStorage.getItem('now')
  if(sessionStorage.getItem('prev') == thispage) {
      goto()
  }
  if(thisprev !== thispage) {
      if(thisprev < thispage) {
          sessionStorage.setItem('prev', thisprev)
          sessionStorage.setItem('now', thispage)
      }
      else {
          goto()
      }
  }
  function goto(){
      window.location = "page1.html" // Reinit test
  }

这样做的好处是，即使用户手动重新加载前一个页面(如果他有时间查看并记住URL)，它仍然可以工作。它没有在所有设备上进行测试，但似乎在Firefox + Chrome + Edge Windows 10和Firefox + Chrome在OS X上运行良好。

只需立即运行代码片段并尝试返回 历史。pushState(null, null, window.location.href); history.back (); 窗口。Onpopstate = () => history.forward();