如何使用JavaScript停止浏览器后退按钮

155

我正在用php做在线测验应用程序。我想限制用户再次参加考试。我尝试了以下脚本，但是它停止了我的计时器。我该怎么办？

我已经包含了源代码。计时器存储在cdtimer.js中

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

我有一个考试计时器，该计时器从mysql值中获取考试时间。计时器相应地启动，但是当我输入用于禁用后退按钮的代码时，计时器停止。我怎么了

javascript  browser 
— 萨万·阿克瑟（Sawant Akshay）
source
— Darshan Dixit

Answers:

157

有许多原因导致禁用后退按钮无法真正起作用。最好的选择是警告用户：

window.onbeforeunload = function() { return "Your work will be lost."; };

该页面的确列出了您可以尝试禁用“后退”按钮的多种方法，但不能保证任何一种方法：

http://www.irt.org/script/311.htm

— 科林
source
如果答案已经提交，则应签入PHP代码，否则请拒绝。
— Sela Yair 2015年
4
值得一提的是，现代浏览器现在已经发生了变化：请参见stackoverflow.com/questions/19926641/…–
— devrobf
127

覆盖Web浏览器的默认行为通常是一个坏主意。出于安全原因，客户端脚本没有足够的权限执行此操作。

也很少有人问类似的问题，

您不能实际禁用浏览器后退按钮。但是，您可以使用自己的逻辑进行魔术操作，以防止用户向后导航，这会产生被禁用的印象。如何查看以下代码段。

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

这是纯JavaScript格式，因此可以在大多数浏览器中使用。它还将禁用退格键，但键将在input字段和中正常工作textarea。

推荐的设置：

将此代码段放在单独的脚本中，并将其包含在您想要此行为的页面上。在当前设置中，它将执行onloadDOM事件，这是此代码的理想入口点。

工作演示！

经过以下浏览器测试和验证，

  • 铬。
  • 火狐浏览器。
  • IE（8-11）和Edge。
  • 苹果浏览器。
— 罗希特416
source
1
我不明白为什么要使用setTimeout。如果我刚开始附加＃！定位并删除setTimeout，它仍然可以工作。
— baraber 2015年
是的，它确实可以工作，但是如果我一开始就必须从内存中调出某些东西的话……那么在chrome中，该流程不能像在其他浏览器中那样正常地工作。Chrome location.hash最初返回的是空白，因此我不得不这样做。可能会有更多的改进，但是一次仅花费50毫秒并没有花太多钱，所以我把它留在那里。
— Rohit416
哦，那是一个内存挑战，谢谢:)我使用了您的解决方案，但用.onhashchange处理程序替换了setInterval。完美运作。但是我还有一个问题：为什么要“如果（global.location.hash！= _hash）”？我认为这种情况只能一直存在，因为window.location.hash应该总是返回带有'＃'字符的哈希，而_hash永远不会包含'＃'字符。您还记得吗？这仅仅是一种保护，以防浏览器在location.hash中不返回'＃'char的情况？
— baraber 2015年
我按照建议创建了一个.js文件，并使用以下代码将js文件包含在我的代码中：<script src =“ ./ javascript / noback.js”> </ script>但我仍然可以执行后退（使用Safari）。我想念什么？该库的添加方式与我使用的其他库相同，因此include非常好。
— 蒂姆（Tim）
该代码已经在所有提到的浏览器中进行了测试，而上次我检查它在所有浏览器中均正常工作时。我今天在Safari中对此进行了测试，并且可以正常工作。您可以只在Safari中打开工作演示链接并查看它是否在您的终端有效吗？
— Rohit416 '17
74 
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
— vrfvr
source
3
天才！我用它来防止当用户在Web应用程序中按Backspace（例如，在禁用/只读字段上）时按Backspace（前进/后退）并没有真正意义时，意外触发后退按钮。确认后禁用前进和后退功能（不是按钮本身），包括上下文菜单选项；通过IE11，Chrome和FF在IE8中进行了验证。
— 没必要，2015年
1
此方法有效，但是会重置在文本框中输入的所有数据。是否可以防止清除？
— 2015年
6
它在Firefox上对我有效，但在chrome上却不起作用（版本36.0.1985.143）
— 理发师
这对我也window.history.back()有用，但是在Firefox上似乎破坏了功能。我们希望防止用户单击浏览器的后退按钮，但是在某些情况下，我们在页面上提供了自己的后退按钮。有什么办法可以使其工作？
— AsGoodAsItGet's
1
这对我不起作用。我在Windows 10上使用的是Chrome版本55。我将脚本放置在多个位置（标题的开头，正文的结尾等），但仍然可以使用“后退”按钮返回上一页。
— 维克多·斯托达德
74

我遇到了这个问题，需要一个能够在各种浏览器（包括发布时的iOS9）上正确且“很好”地在各种浏览器上运行的解决方案。没有一个解决方案是正确的。我提供以下内容（在IE11，FireFox，Chrome和Safari上经过测试）：

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

请注意以下几点：

  • history.forward()（我的旧解决方案）在Mobile Safari上不起作用---似乎无能为力（即用户仍然可以返回）。history.pushState()确实适用于所有人。
  • 第三个参数history.pushState()是url。传递类似'no-back-button'或'pagename'似乎可以正常工作的字符串的解决方案，直到您尝试在页面上进行“刷新/重新加载”为止，此时浏览器尝试查找以该URL为URL的页面时，会生成“找不到页面”错误。（在页面上浏览器可能还会在地址栏中包含该字符串，这很丑陋。）location.href应将其用于网址。
  • 的第二个参数history.pushState()是标题。环顾网络，大多数地方都说它是“未使用”的，这里所有的解决方案都null可以做到这一点。但是，至少在Mobile Safari中，这会将页面的Url放入用户可以访问的历史记录下拉列表中。但是，当它通常为页面访问添加一个条目时，会放入其title，这是更可取的。因此，通过document.title该操作将导致相同的行为。
— 乔恩·布拉夫
source
3
这是正确的答案。在Chrome，IE 11，Firefox和Edge上完美运行。
— Concept211
3
这应该是公认的答案，它是跨平台的，并且运行良好。
— calbertts
在jsp sevlet中，提交后刷新页面。页面无法显示（错误）
— Madhuka Dilhan
迄今为止最好的解决方案，但可能不适用于较旧的浏览器
— j4n7
2
适用于现代浏览器的完美解决方案。我已经与@ Rohit416答案结合起来，仅使用条件typeof（history.pushState）===“ function”即可顺利支持较旧的浏览器。
— Miklos Krivan '18
28

对于支持HTML5历史记录API的现代浏览器，此代码将禁用后退按钮。通常情况下，按“后退”按钮可返回上一步。如果使用history.pushState（），则开始向当前页面添加额外的子步骤。它的工作方式是，如果要使用history.pushState（）三次，然后开始按“后退”按钮，则前三次它将在这些子步骤中导航回去，然后第四次返回到前一页。

如果将此行为与事件上的事件侦听器结合使用popstate，则可以从根本上设置子状态的无限循环。因此，您加载页面，推入一个子状态，然后单击“后退”按钮，这会弹出一个子状态并同时推入另一个状态，因此，如果再次按下“后退”按钮，它将永远不会耗尽要推入的子状态。如果您认为有必要禁用“后退”按钮，这将带您到那里。

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
— 杰里米·沃恩（Jeremy Warne）
source
2
在任何浏览器上，此后尝试刷新/重新加载页面，您将陷入“找不到页面”错误，因为它试图查找名为no-back-button... 的页面（浏览器也可能会显示no-back-button在地址中公平地说，这不是唯一遭受此困扰的解决方案。的第三个参数history.pushState()是url，并且必须是当前页面的url：请location.href改用。
— JonBrave 2015年
4
这对我有用。只要改变“无背扣”到“window.top.location.pathname + window.top.location.search”，它会留你在页面的名称，甚至在刷新
— 史蒂夫
除其他外，这对我有用，赞成。请参阅stackoverflow.com/questions/19926641/…。
— user2171669 '16
我研究了很多情况，这是1页网站的最佳解决方案
— djdance
这是一个非常糟糕的解决方案，因为您正在更改URL，因此，如果您前后移动几次，chrome将重定向到不存在的路径
— Tallboy
21

对于限制浏览器后退事件

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
— 费扎尔·哈莱
source
1
这在chrome上效果很好！为什么人们不投票，因为这是最好的答案？
— 塔里克Seyceri
1
我刚刚在以下浏览器上使用Windows 10 OS对其进行了测试（效果很好）Chrome版本74.0.3729.108（官方内部版本）（64位）Chrome Canary版本76.0.3780.0（官方内部版本）金丝雀（32位）Chromium版本66.0。 3355.0（显影剂生成）（64位）的Firefox 66.0.3（64位）EDGE IE 11的Safari 5.1.7
— 拉茶Seyceri
2
@TarıkSeyceri，因为这仅适用于a）支持历史记录API的浏览器b）该页面实际上正在使用历史记录API管理状态
— givanse
版本75之后在Chrome中不再起作用。请参阅：support.google.com/chrome/thread/8721521?hl=zh
— 基因b。
13 

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

— Eng Mahmoud El Torri
source
12
尽管这可能是一个有效的答案，但是您更有可能通过解释代码的功能和工作方式来帮助他人。仅代码的答案往往不会受到积极的关注，也没有其他答案那么有用。
— Aurora0001 '16
在Chrome，Firefox，IE和Edge上进行了测试。它运作良好。你救了我。
— Nooovice Boooy
12

这就是我完成它的方式。奇怪地更改window.location在chrome和safari中效果不佳。碰巧location.hash不会在chrome和safari的历史记录中创建条目。因此，您将不得不使用pushstate。这对所有浏览器都适用。

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
— Sanchitos
source
1
在IE9及以下版本中不起作用，不支持pushState。
— Alex
大。这是一种很好的方法，几乎​​可以在所有最新的浏览器中使用。
— Venugopal M
1
在以后的IE中效果很好。只需直接放入document.ready中即可： $(document).ready(function () { .... });
— Oppa Gingham Style
请记住，您必须在“ #nbb”之前添加当前uri。即“ account＃nbb”
— Mladen Janjetovic
9 
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
— 阿什温·帕蒂尔（Ashwin Patil）
source
是否有一些文档可用于event.persisted？
— Muhd
1
这是为您的问题找到的链接。在这里找到@Muhd
— rbashish '17
8

我觉得jordanhollinger.com上的这篇文章是最好的选择。与Razor的答案类似，但更清晰。下面的代码；完全归功于Jordan Hollinger：

前一页：

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

不可退回的JavaScript页面：

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}
— dav_i
source
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

此JavaScript不允许任何用户返回（可在Chrome，FF，IE，Edge中运行）

— 苏拉吉特米特拉
source
5

轻松尝试：

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
— 拉汗
source
5

该代码已在最新的Chrome和Firefox浏览器上进行了测试。

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>
— 富兰克林·诺诺森特F
source
欢迎光临。
— Franklin Innocent F
3

非常简单和干净的功能，可以在不干扰页面的情况下折断后退箭头。

好处：

  • 瞬时加载并恢复原始哈希，因此用户不会因URL的明显变化而分心。
  • 用户仍然可以通过按回10次退出（这是一件好事），但并非偶然
  • 不会像其他解决方案那样受到用户的干扰 onbeforeunload
  • 它只运行一次，不会干扰进一步的哈希操作，以防您使用它来跟踪状态
  • 恢复原始哈希，因此几乎不可见。
  • 使用setInterval它不会破坏慢速浏览器，并且始终有效。
  • 纯Javascript不需要HTML5历史记录，可在任何地方使用。
  • 简洁，简单，并且可以与其他代码很好地配合。
  • 不使用unbeforeunload带模式对话框的中断用户。
  • 它只是正常工作。

注意：其他一些解决方案使用onbeforeunload。请不要使用onbeforeunload用于这一目的，只要用户试图关闭窗口，它会弹出一个对话框，命中backarrow等情态动词一样onbeforeunload，通常只在适当罕见的情况下，例如当他们实际上是由在屏幕上天堂的变化”不要保存它们，不是为了这个目的。

这个怎么运作

  1. 在页面加载时执行
  2. 保存原始哈希（如果URL中包含哈希值）。
  3. 依次将＃/ noop / {1..10}附加到哈希
  4. 恢复原始哈希

而已。没有进一步的混乱，没有后台事件监视，仅此而已。

一秒钟使用

要进行部署，只需将其添加到页面或JS中的任意位置即可：

<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>
— 致命错误
source
2

这似乎对我们起作用了，即禁用了浏览器上的后退按钮，以及使您退回的退格按钮。 

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
— 加布
source
1 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
— 用户名
source
1

您根本不能也不应这样做。但是，这可能会有所帮助

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

适用于我的Chrome和Firefox

— 谢兰德拉·沙玛（Shailendra Sharma）
source
1

尝试执行以下操作以防止IE中的默认退格按钮：“退格”：

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>
— 阿吉特·坎伯（Ajit Kamble）
source
1

我相信，完美而又完美的解决方案实际上是非常简单的，我已经使用了很多年。

它基本上是将窗口的“ onbeforeunload”事件与正在进行的文档“ mouseenter” /“ mouseleave”事件一起分配，因此仅当单击超出文档范围时才触发警报（然后可以是浏览器的后退或前进按钮）

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
— Abdelqoddous Rifai
source
1

在现代浏览器中，这似乎可行：

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)
— 乔基姆·克里斯蒂安森
source
1
不知道发生了什么，但是由于某种原因，我在另一台计算机上拒绝了这个答案。只是让您知道这不是我的意图，但我不能再取消投票了：/
— Lennard Fonteijn
没有感觉受到伤害@LennardFonteijn :)
— Joakim L. Christiansen
1

在Chrome 79中，最受支持的答案都没有对我有用。在75版之后，Chrome似乎更改了其相对于“后退”按钮的行为，请参见此处：

https://support.google.com/chrome/thread/8721521?hl=zh_CN

但是，在该Google线程中，Azrulmukmin Azmi在最后提供的答案确实有效。这是他的解决方案。

<script>

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

</script>

Chrome的问题在于，除非您执行浏览器操作（例如，调用history.back），否则它不会触发onpopstate事件。这就是为什么我将这些添加到脚本中的原因。

我不完全理解他写的内容，但显然history.back() / history.forward()现在需要额外的内容才能阻止Chrome 75+中的Back。

— 基因b。
source
经过上下搜索后，这最终也可以在Android浏览器上使用，由于某种原因，在我尝试过的任何其他脚本中均未检测到浏览器的后退按钮事件。谢谢，谢谢，再次谢谢！经过测试，可以在台式机和移动设备上使用Chrome 83正常运行！吉恩，你是救命稻草！
— 伊万
0

我创建一个HTML页面（index.html）。我还在（脚本）文件夹/目录中创建了一个（mechanism.js）。然后，根据需要使用form，table，span和div标签将所有内容放在（index.html）内。现在，这里的技巧将使前进/后退什么都不做！

首先，您只有一页的事实！其次，在需要时通过常规链接将JavaScript与span / div标签一起使用来隐藏和显示同一页面上的内容！

里面'index.html'：

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

里面'机制.js'：

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

它看起来很毛茸茸，但请注意函数名称和调用，嵌入式HTML以及span标签id调用。这是为了展示如何将不同的HTML注入到同一页面的同一span标签中！后退/前进如何影响此设计？不能，因为您要隐藏对象并替换同一页面上的所有对象！

如何隐藏和显示？这里是：根据需要，在“ mechanism.js”中的内部函数中使用：

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

在“ index.html”内部通过链接调用函数：

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

和

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

希望我不要让您头痛。对不起，如果我这样做:-)

— 黑客1033
source
0

就我而言，这是一个购物订单。所以我要做的就是禁用按钮。用户单击后，该按钮仍被禁用。当他们再单击一次，然后单击一个页面按钮前进时。我知道他们的订单已提交，并跳到了另一页。

在页面实际刷新的情况下（理论上）可使按钮可用；然后，我能够在页面加载中作出反应，即订单已提交，然后也进行重定向。

— 瓦拉马斯
source
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
— 卡姆列什
source
3
1. javascript:您编写的定义了一个名为“ javascript” 的JavaScript 标签。我非常怀疑你的意图；我怀疑您正在href=javascript:...与JavaScript <script>块混淆。2. language="JavaScript"不再是<script>HTML5 上的有效属性。3.以上两点无关紧要；重要的是，history.forward(1)至少在Mobile Safari中不起作用。改用history.pushState()答案之一。
— JonBrave 2015年
0

您可以放一个小的脚本，然后检查。它不允许您访问上一页。这是用javascript完成的。

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

当您尝试通过浏览器返回上一页或上一页时，将触发window.onunload函数。

希望这可以帮助。

— 编程器
source
0

我在React.JS中遇到了这个问题。（类组件）

轻松解决

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

我已经习惯HashRouter了react-router-dom。

— o
source
0

只需设置location.hash="Something"，在按“后退”按钮时，哈希将从网址中删除，但页面不会返回，此方法有助于防止意外返回，但是出于安全目的，您应设计后端以防止重新回答

— 阿比舍克
source
-1 
//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}
— 钟昌熙
source
1获取事件对象2.确定事件源类型，作为判断条件。3.当按退格键时，事件源类型为密码或单个，并且将readonly属性设置为true或enabled属性为false，则退格键将失败。当按下Backspace时，事件的源键入密码或单个，是Backspace密钥失败
— Chauncey.Zhong
问题是询问是否使用“后退导航”按钮而不是Backspace键。
— Quentin
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.