点击链接跳转后禁用浏览器返回功能的技术实现咨询

1. 修改跳转逻辑，替换历史记录 #

你当前用window.location = URL是在历史栈中新增条目，所以浏览器能返回原页面。把这行代码改成window.location.replace(URL)，它会用新页面替换当前的历史记录条目，原页面不会留在历史栈内，从根源上切断返回路径。

修改后的delay函数：

function delay (URL) {
    setTimeout( function() {
        // 替换为replace方法覆盖历史记录
        window.location.replace(URL)
    }, 1000);   
    
    var deneme = body.getBoundingClientRect().bottom * -1;  
    tPage.classList.add('transition-close');
    body.classList.add('stop-scroll');  
    tPage.style.display = "block";
    tPage.style.top = deneme + "px";        
}

2. 目标页面添加防返回监听 #

仅靠replace可能无法覆盖所有场景（比如用户跳转前已有其他历史记录），在跳转后的目标页面（如news.html）添加以下代码，彻底锁死返回操作：

// 页面加载时新增一条当前页面的历史记录
history.pushState(null, null, window.location.href);

// 监听浏览器返回事件
window.addEventListener('popstate', function() {
    // 再次新增当前页面的历史记录，抵消返回操作
    history.pushState(null, null, window.location.href);
    // 若需要，可直接跳转到退出页面，示例：
    // window.location.href = '你的退出页面地址';
});

完成以上两步后，用户点击跳转后，浏览器返回按钮将无法回到原页面，完全匹配你的需求。

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