如何无需交互即可实现禁用浏览器后退按钮？

你当前的代码需要用户交互才能生效，核心原因是现代浏览器的安全策略——非用户触发的历史栈操作会被限制，直接在页面加载阶段执行pushState这类操作，部分浏览器会拦截或不生效。以下是无需用户交互即可尝试干扰后退行为的可行方案：

方案一：页面初始化时注入历史栈状态 #

在页面DOM加载完成后直接执行历史栈操作，多数常规浏览器允许这种初始化行为：

window.addEventListener('DOMContentLoaded', function() {
    // 页面加载时推入当前页面状态到历史栈
    history.pushState(null, document.title, location.href);
    // 监听后退触发的popstate事件，强制将页面状态推回当前页
    window.onpopstate = function() {
        history.pushState(null, document.title, location.href);
    };
});

注意：该方案并非100%兼容所有浏览器，隐私模式或启用严格安全策略的浏览器仍可能限制此类操作，但普通场景下基本生效。

方案二：结合页面卸载拦截（辅助增强） #

如果需要更严格的拦截效果，可搭配beforeunload事件（主要用于阻止页面关闭/刷新，辅助强化后退拦截逻辑）：

window.addEventListener('DOMContentLoaded', function() {
    history.pushState(null, document.title, location.href);
    window.onpopstate = function() {
        history.pushState(null, document.title, location.href);
    };
    // 拦截页面卸载行为，弹出确认框（可选，会影响用户体验）
    window.onbeforeunload = function() {
        return '确定要离开当前页面吗？';
    };
});

关键提醒 #

浏览器不允许彻底禁用后退按钮，这是用户的核心导航控制权，所有方案都只是干扰后退行为而非完全禁用。另外，无交互方案的有效性依赖浏览器版本和安全策略，部分现代浏览器的严格模式仍可能限制非用户触发的历史栈操作，这种情况下只能通过用户交互触发（比如页面加载后自动触发隐藏元素的点击事件，但属于hack手段，不推荐使用）。

内容的提问来源于stack exchange，提问作者Tungnt