如何解决使用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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。