如何使用 JavaScript 禁用浏览器中的后退按钮

IT技术 javascript
2021-01-29 22:17:48

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

每当用户点击浏览器后退按钮时,它就不能进入用户之前访问过的页面。

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);
});
正如@ArjunAjith 所建议的那样,我替换document.titledocument.url它并且它正在工作。+1 这个答案。
2021-03-19 22:17:48
需要注意的是,这不会禁用长按后退按钮。这表现正常,让你回到历史。
2021-03-27 22:17:48
应该是history.pushState(null, document.title, location.href); window.addEventListener('popstate', function (event) { history.pushState(null, document.title, location.href); });参考:stackoverflow.com/a/34337617/2073920
2021-03-29 22:17:48
Downvoting :因为它更改了 URL 以及由于哪个站点在刷新时崩溃。
2021-04-03 22:17:48
@Mckenzie 由于 history.pushState(null, null, document.title); 陈述。它将页面标题放在 URL 中,这会导致刷新时崩溃。您可以将document.title替换为您的页面 URL。这将解决您的问题。在否决之前,请尝试理解代码。这是迄今为止我找到的最好的解决方案之一。
2021-04-10 22:17:48

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

下面的 JavaScript 代码需要放置在您不希望用户使用后退按钮重新访问的页面的头部部分:

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

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

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

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

更多信息:参考

在 Chrome 和 IE 中对我有用。谢谢!
2021-03-14 22:17:48
参考代码在 Chrome 中不起作用。
2021-03-25 22:17:48
我也无法在 Firefox 中工作
2021-04-13 22:17:48

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

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

<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>
打开一个新窗口没有该选项卡或窗口的任何历史记录,因此这是有效的。但如果你想留在同一个窗口,这甚至离回答这个问题还差得很远。
2021-03-14 22:17:48
使用 history.pushState() 适用于所有支持 HTML5 History API 的现代浏览器
2021-03-15 22:17:48
浏览器警告用户该站点正在尝试关闭他们的页面,并且他们可以选择单击取消...所以在这里我们只在他们真正退出并离开页面时重定向他们。
2021-04-01 22:17:48
@dhruvpatel 在 GNOME 的 Epiphany 浏览器中,打开新视图(选项卡/窗口)确实继承了父视图的历史记录。
2021-04-09 22:17:48

你不能,也不应该。

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

这就是我的意见。

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