css 禁止手机端后退前进

CSS禁止手机端后退前进的方法：

window.addEventListener("pageshow", function(event){
    //如果有缓存，用户在页面中跳转的时候，页面会重新加载（并不是后退前进），此时也需要禁止后退前进功能    if (event.persisted) {
            location.reload();
    }
}
    );
    history.pushState(null, null, document.URL);
window.addEventListener('popstate', function(){
        history.pushState(null, null, document.URL);
}
    );
    

若想在手机端禁止后退前进功能，可以使用上述代码。通常在单页应用程序中需要这样做，因为单页应用程序中的所有内容都加载在一个页面上。

首先，我们需要添加一个“pageshow”事件监听器。当页面重新加载时，如果使用缓存，我们需要重新加载页面。因此，我们需要使用一个条件语句来判断事件是否被持久化（从缓存加载的事件），如果是则重新加载整个页面。

其次，当渲染页面之后，我们使用“pushState”方法将当前页面的URL添加到浏览器的历史记录中。这将确保用户无法通过后退按钮返回到前一页。然后，我们添加一个事件侦听器，“popstate”，该侦听器在浏览器的历史记录发生更改时被触发。 在这里，我们再次使用“pushState”函数来将页面URL添加到浏览器的历史记录中，因此，用户依旧无法通过后退按钮返回到前一页。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！