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

Posted 2023-02-21

【中文标题】如何使用 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】：

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

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

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

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

假设有两个页面Page1.php和Page2.php和Page1.php重定向到Page2.php。

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

欲了解更多信息：Reference

【讨论】：

参考代码在 Chrome 中不起作用。

我也无法在 Firefox 中使用它

在 Chrome 和 IE 中为我工作。谢谢！

【参考方案2】：

你不能，也不应该。

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

这是我的看法。

【讨论】：

假设您正在参加在线考试，那么它就有点意思了。

我认为提醒和确认会更好

您应该能够做到这一点的最实际示例是，当您在 Firefox 中单击“后退”按钮时，您打开了一个 iframe 并更改了历史记录， iframe 将返回，而不是整个页面。这只是公牛。

在某些情况下是需要的。如果您正在显示 Web 视图，并且可以控制浏览器历史记录，则您可能希望在某些时候禁用后退按钮。考虑一下您在 Web 视图中订购某些东西的情况，如果您没有禁用返回，您可能会不必要地重复订购相同的东西。

你是对的，这是只有糟糕的网站才会做的事情，为此有一个 onbeforeunload 事件。

【参考方案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】：

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 URL 因 history.pushState(null, null, document.title) 而改变；陈述。它将页面的标题放在 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