使用JSON时，无限滚动历史记录会中断URL

问题描述

我在产品列表中使用了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
});

启用历史记录后，我的网址将转换为：

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

，URL应保持为mydomain.com/

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

解决方法

从路径功能指定的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);
}

browser-history infinite-scroll