如何结合preventBack()实现按下返回键时移除指定div？

嘿，我来帮你搞定这个需求！你想把按下返回键的行为从强制页面前进改成移除指定div，对吧？这里给你整理了更优雅的实现方案：

完整整合代码（使用jQuery） #

首先确保页面已经引入了jQuery，然后用popstate事件监听返回键动作：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// 页面加载时先添加一条当前页面的历史记录，确保第一次按返回键能触发我们的逻辑
history.pushState(null, null, window.location.href);

// 监听浏览器返回键触发的popstate事件
window.addEventListener('popstate', function() {
    // 移除指定的#box元素
    $('#box').remove();
    
    // 再次添加历史记录，让后续返回键继续触发该逻辑（如果只需要触发一次可以删掉这行）
    history.pushState(null, null, window.location.href);
});
</script>

代码逻辑说明 #

• popstate事件：这是浏览器专门用来监听历史记录变化的事件，按下返回键时会触发它，比原来的history.forward()方式更优雅，不会强制页面跳转。
• history.pushState()：页面加载时调用它，是为了给当前页面添加一条额外的历史记录，这样第一次按返回键不会直接跳转到上一页，而是执行我们的移除操作；事件里再次调用，是为了让后续的返回键操作依然能触发移除逻辑（如果只需要触发一次，就去掉这行）。

无jQuery的原生JS版本 #

如果你不想依赖jQuery，用原生JS也能轻松实现：

<script type="text/javascript">
history.pushState(null, null, window.location.href);

window.addEventListener('popstate', function() {
    const targetDiv = document.getElementById('box');
    if (targetDiv) {
        targetDiv.remove();
    }
    history.pushState(null, null, window.location.href);
});
</script>

这样就能完美实现你想要的效果：访客进入页面后按下返回键，指定的div就会被移除啦。

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