无限滚动历史记录在使用 JSON 时打破了 URL

Question

我正在为我的产品列表使用 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 更改为错误的路径并仅传递滚动到特定页面所需的变量？

Answer 1

当从路径函数指定的 URL 加载新页面时，URL 将替换地址栏中显示的当前 URL。
这是在 infinite-scroller 的 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);
}

无限滚动历史记录在使用 JSON 时打破了 URL

Infinite Scroll history breaks the URL when using JSON

infinite-scroll

browser-history

pushstate