如何使用 JavaScript 禁用浏览器中的后退按钮 [重复]

Posted

技术标签:

【中文标题】如何使用 JavaScript 禁用浏览器中的后退按钮 [重复]【英文标题】:How to disable the back button in the browser using JavaScript [duplicate] 【发布时间】:2013-11-24 10:51:17 【问题描述】:

我想禁用网站的后退按钮。

当用户点击浏览器的返回按钮时,它应该无法进入用户之前访问过的页面。

【问题讨论】:

(a) 从可用性的角度来看,这是一个可怕的想法。 (b) 见:***.com/questions/12381563/… 你不能也不应该这样做。但是,您可能会发现 unload event 很有用。 每件事都有时间、地点和需求。但仇恨者必须仇恨。我可以在今天的 ajax 驱动的 Web 应用程序中列出一些必要的原因。 试试这个,不同的方法geekswithblogs.net/Frez/archive/2010/05/18/… 也可以参考***.com/a/28458499/2089963 【参考方案1】:
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () 
    history.pushState(null, null, document.title);
);

此脚本将覆盖当前页面状态来回导航的尝试。


更新:

一些用户报告说使用document.URL而不是document.title取得了更好的成功:

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () 
    history.pushState(null, null, document.URL);
);

【讨论】:

Downvoting :因为它更改了 URL 以及由于哪个站点在刷新时崩溃。 @Mckenzie 由于 history.pushState(null, null, document.title); 更改了 URL陈述。它将页面的标题放在 URL 中,这会导致刷新时崩溃。您可以将 document.title 替换为您的页面 URL。这将解决您的问题。在投反对票之前,请尝试理解代码。这是迄今为止我发现的最好的解决方案之一。 正如@ArjunAjith 建议的那样,我用document.url 替换了document.title,它正在工作。对此答案 +1。 请注意,这不会禁用长按后退按钮。这表现正常,让你回到历史。 应该是history.pushState(null, document.title, location.href); window.addEventListener('popstate', function (event) history.pushState(null, document.title, location.href); );参考:***.com/a/34337617/2073920【参考方案2】:

不能禁用浏览器后退按钮功能。唯一能做的就是阻止它们。

下面的 javascript 代码需要放在您不希望用户使用返回按钮重新访问的页面的头部:

<script>
    function preventBack() 
        window.history.forward();
    

    setTimeout("preventBack()", 0);
    window.onunload = function() 
        null
    ;
</script>

假设有两个页面Page1.phpPage2.phpPage1.php重定向到Page2.php

因此,为了防止用户使用后退按钮访问Page1.php,您需要将上述脚本放在Page1.php 的头部。

欲了解更多信息:Reference

【讨论】:

参考代码在 Chrome 中不起作用。 我也无法在 Firefox 中使用它 在 Chrome 和 IE 中为我工作。谢谢!【参考方案3】:

我们的方法很简单,但它有效! :)

当用户点击我们的注销按钮时,我们只需打开登录页面(或任何页面)并关闭我们所在的页面...模拟在新浏览器窗口中打开,没有任何历史可返回。

<input id="btnLogout" onclick="logOut()" class="btn btn-sm btn-warning" value="Logout" type="button"/>
<script>
    function logOut() 
        window.close = function ()  
            window.open('Default.aspx', '_blank'); 
        ;
    
</script>

【讨论】:

浏览器警告用户该站点正在尝试关闭他们的页面,他们可以选择单击取消...所以这里我们只在他们真正退出并离开页面时重定向他们. use history.pushState() 适用于所有支持 html5 History API 的现代浏览器 打开一个新窗口没有该选项卡或窗口的任何历史记录,因此可以正常工作。但是,如果您想留在同一个窗口中,这甚至无法回答该问题。 @dhruvpatel 在 GNOME 的 Epiphany 浏览器中,打开新视图(选项卡/窗口)确实继承父视图的历史记录。【参考方案4】:

你不能,也不应该。

所有其他方法/替代方案只会导致非常糟糕的用户参与度。

这是我的看法。

【讨论】:

假设您正在参加在线考试,那么它就有点意思了。 我认为提醒和确认会更好 应该能够做到这一点的最实际示例是,当您在 Firefox 中单击“后退”按钮时,您打开了一个 iframe 并更改了历史记录, iframe 将返回,而不是整个页面。这只是公牛。 在某些情况下是需要的。如果您正在显示 Web 视图,并且可以控制浏览器历史记录,则您可能希望在某些时候禁用后退按钮。考虑一下您在 Web 视图中订购某些东西的情况,如果您没有禁用返回,您可能会不必要地重复订购相同的东西。 你是对的,这是只有糟糕的网站才会做的事情,为此有一个 onbeforeunload 事件。

以上是关于如何使用 JavaScript 禁用浏览器中的后退按钮 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 JavaScript 禁用浏览器中的后退按钮 [重复]

如何使用javascript禁用后退和前进按钮

使用 AngularJS/Javascript 仅禁用浏览器后退按钮导航(不是应用程序中的链接)

如何用jQuery禁用浏览器的前进后退按钮

如何禁用浏览器后退按钮..? [复制]

javascript怎么禁用浏览器后退按钮