基于CSS隐藏Div的房产列表加载更多功能的浏览器后退按钮问题

这个场景下的核心痛点是：浏览器默认的历史记录只追踪页面级的跳转，不会记录你通过前端交互（点击“加载更多”）实现的内容展示状态变化。用户点击后退时，浏览器会直接回到上一个页面，而不是回到之前只显示6条、15条结果的状态。要解决这个问题，我们需要结合History API和状态监听/恢复逻辑来实现，下面是具体的实现方案：

1. 用History API记录每次加载后的状态 #

每次用户点击“加载更多”并成功展示额外结果后，我们需要把当前已显示的结果总数存入浏览器的历史状态中，同时更新URL（可选但推荐，提升用户体验）。

修改你现有的点击事件代码：

// 先获取初始显示的数量，比如默认6条
let currentShownCount = 6;

a("span.more-search-items").on("click", function(t) {
    t.preventDefault();
    var e = a(this).parents(".property-search");
    // 找到未显示的前9条并添加.show类
    e.find(".prop").not(".show").slice(0, 9).addClass("show");
    
    // 更新当前显示数量
    currentShownCount += 9;
    
    // 用pushState添加一条历史记录，把当前显示数存在state里
    // 同时可以更新URL的query参数，比如?show=15，让状态更直观且支持刷新恢复
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set('show', currentShownCount);
    window.history.pushState({ count: currentShownCount }, "", newUrl.href);
});

2. 监听popstate事件，恢复历史状态 #

当用户点击后退/前进按钮时，浏览器会触发popstate事件，我们可以在这个事件里读取之前保存的状态，然后调整结果的显示状态：

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.count) {
        const targetCount = event.state.count;
        const e = a(".property-search");
        
        // 先隐藏所有结果
        e.find(".prop").removeClass("show");
        // 显示前targetCount条结果
        e.find(".prop").slice(0, targetCount).addClass("show");
        
        // 更新当前显示数量的变量
        currentShownCount = targetCount;
    } else {
        // 如果没有状态，回到默认的6条
        const e = a(".property-search");
        e.find(".prop").removeClass("show");
        e.find(".prop").slice(0, 6).addClass("show");
        currentShownCount = 6;
    }
});

3. 页面初始化时恢复状态 #

用户可能直接通过带query参数的URL访问页面（比如刷新、从书签打开），这时候我们需要从URL的query参数或者history.state里读取状态，初始化结果的显示：

$(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const savedCount = urlParams.get('show') || window.history.state?.count || 6;
    currentShownCount = parseInt(savedCount, 10);
    
    const e = a(".property-search");
    e.find(".prop").removeClass("show");
    e.find(".prop").slice(0, currentShownCount).addClass("show");
});

额外注意事项 #

• 如果你不想修改URL的query参数，也可以只使用pushState存状态，但这样用户刷新页面后状态会丢失，体验不如结合URL参数好。
• 要注意避免重复绑定popstate事件，可以把监听逻辑放在页面初始化时只执行一次。
• 如果你的结果列表是动态加载的（比如从后端获取新数据，而不是一开始就把所有结果渲染到DOM里），那还需要结合数据加载逻辑，在后退时重新加载对应数量的数据，再渲染展示。

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