这是另一种方法。我们可以添加简短的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上运行良好。

对我来说，这是一个购物订单。所以我禁用了按钮。当用户单击返回时，该按钮仍然被禁用。当他们再次点击返回，然后点击页面按钮继续前进时。我知道他们的订单已经提交，然后跳转到另一页。

在页面实际刷新的情况下，将使按钮(理论上)可用;然后，我能够在页面加载反应，订单已经提交，然后也重定向。

轻松尝试一下:

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

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

它基本上是分配窗口的“onbeforeunload”事件以及正在进行的文档“mouseenter”/“mouseleave”事件，因此警报只在单击超出文档范围时触发(然后可以是浏览器的后退或前进按钮)

美元(文档)。On ('mouseenter'，函数(e) { 窗口。Onbeforeunload = null; ｝ ); 美元(文档)。On ('mouseleave'，函数(e) { 窗口。onbeforeunload = function(){返回"你的工作将会丢失";}; ｝ );

如果你使用的是angular，只需在div或容器div中使用*ngIf=loggedout即可。

在组件中设置变量。如果为真，显示其他路由器将重定向到主页。根据你在路由器文件上的配置。

这工作的登录和注销使用用户名为例。至于其他账户相关页面或内部页面，这将是有点难以防止。您可能需要禁用整个浏览器的nav选项卡。