使用 JSON 时，无限滚动历史会破坏 URL答案

【问题标题】：Infinite Scroll history breaks the URL when using JSON使用 JSON 时，无限滚动历史会破坏 URL
【发布时间】：2020-08-24 12:19:36
【问题描述】：

我正在为我的产品列表使用 Infinite Scroll 插件。该插件正在从 JSON 加载数据，如果我不启用历史记录，它可以正常工作。

现在我希望插件更改历史记录，因此当用户打开产品详细信息页面然后使用后退按钮时，他/她会被重定向到最后一个滚动位置。

当我启用 history: 'replace' 选项时会出现问题，该选项会更改服务器端脚本的子文件夹的页面 URL 和路径，从而破坏所有链接和图像。

这是我的初始化代码：

$infiniteContainer = $('#resultsContainer').infiniteScroll({
    path: function() {
        return 'ajax/ajax.items.php?'
        + '&s=' + searchStr
        + '&cat=' + filterCat
        + '&sub=' + filterSubCat
        + '&order=' + orderBy
        + '&offset=' + this.pageIndex;
    },
    responseType: 'text',
    history: 'replace',
    loadOnScroll: true,
    checkLastPage: true
});

当我启用历史记录时，我的 URL 会转换为：

mydomain.com/ajax/ajax.items.php?s=&cat=&sub=&order=&offset=1

并且 URL 应保持为 mydomain.com/

如何防止无限滚动以将 URL 更改为错误的路径并仅传递滚动到特定页面所需的变量？

【问题讨论】：

标签： infinite-scroll browser-history pushstate

【解决方案1】：

从 path 函数指定的 URL 加载新页面时，该 URL 将替换地址栏中显示的当前 URL。
这是在无限滚动器的setHistory 函数中完成的（参见infinite-scroll.pkgd.js 中的第1159 行）。

如果您的目标是从mydomain.com/ajax/ajax.items.php?s=&cat=&sub=&order=&offset=1 加载数据，但地址栏中显示mydomain.com?s=&cat=&sub=&order=&offset=1，您可以修改该函数。
我没有找到配置setHistory 行为的方法，因此以下解决方法将其替换（对于单个 InfiniteScroll 实例 infScroll）：

const infScroll = new InfiniteScroll( '#resultsContainer', path: function() {
        return 'ajax/ajax.items.php?'
        + '&s=' + searchStr
        + '&cat=' + filterCat
        + '&sub=' + filterSubCat
        + '&order=' + orderBy
        + '&offset=' + this.pageIndex;
    },
    responseType: 'text',
    history: 'replace',
    loadOnScroll: true,
    checkLastPage: true
});

const originalSetHistory = infScroll.setHistory;

infScroll.setHistory = function (title, path) {
  const modifiedPath = path.replace("mydomain.com/ajax/ajax.items.php", "mydomain.com")
  originalSetHistory.call(infScroll, originalSetHistory, modifiedPath);
}

【讨论】：