使用django-el-pagination(延迟分页)保存浏览器历史记录
Keep browser history with django-el-pagination (lazy pagination)
我使用django-el-pagination来延迟加载条目。
当我点击一个条目,然后使用浏览器的返回按钮,所有的延迟加载都消失了,我试图添加window.history.pushState()
,但当我使用浏览器的返回按钮时,我只得到当前页面即?page=4
,而顶部的所有条目都没有加载。
是否有办法实现正确的历史记录,以便用户在使用浏览器后退按钮时回到相同的地方?
$.endlessPaginate({
paginateOnScroll: true,
paginateOnScrollMargin: 400,
paginateOnScrollChunkSize: 2,
onCompleted: function(context, fragment) {
window.history.pushState(null, null, context.url);
}
});
<标题>编辑1 下面是
.endlessPaginate
函数的JavaScript代码:
'use strict';
(function ($) {
// Fix JS String.trim() function is unavailable in IE<9 #45
if (typeof(String.prototype.trim) === "undefined") {
String.prototype.trim = function() {
return String(this).replace(/^'s+|'s+$/g, '');
};
}
$.fn.endlessPaginate = function(options) {
var defaults = {
// Twitter-style pagination container selector.
containerSelector: '.endless_container',
// Twitter-style pagination loading selector.
loadingSelector: '.endless_loading',
// Twitter-style pagination link selector.
moreSelector: 'a.endless_more',
// Digg-style pagination page template selector.
pageSelector: '.endless_page_template',
// Digg-style pagination link selector.
pagesSelector: 'a.endless_page_link',
// Callback called when the user clicks to get another page.
onClick: function() {},
// Callback called when the new page is correctly displayed.
onCompleted: function() {},
// Set this to true to use the paginate-on-scroll feature.
paginateOnScroll: false,
// If paginate-on-scroll is on, this margin will be used.
paginateOnScrollMargin : 1,
// If paginate-on-scroll is on, it is possible to define chunks.
paginateOnScrollChunkSize: 0
},
settings = $.extend(defaults, options);
var getContext = function(link) {
return {
key: link.attr('rel').split(' ')[0],
url: link.attr('href')
};
};
return this.each(function() {
var element = $(this),
loadedPages = 1;
// Twitter-style pagination.
element.on('click', settings.moreSelector, function() {
var link = $(this),
html_link = link.get(0),
container = link.closest(settings.containerSelector),
loading = container.find(settings.loadingSelector);
// Avoid multiple Ajax calls.
if (loading.is(':visible')) {
return false;
}
link.hide();
loading.show();
var context = getContext(link);
// Fire onClick callback.
if (settings.onClick.apply(html_link, [context]) !== false) {
var data = 'querystring_key=' + context.key;
// Send the Ajax request.
$.get(context.url, data, function(fragment) {
container.before(fragment);
container.remove();
// Increase the number of loaded pages.
loadedPages += 1;
// Fire onCompleted callback.
settings.onCompleted.apply(
html_link, [context, fragment.trim()]);
});
}
return false;
});
// On scroll pagination.
if (settings.paginateOnScroll) {
var win = $(window),
doc = $(document);
doc.scroll(function(){
if (doc.height() - win.height() -
win.scrollTop() <= settings.paginateOnScrollMargin) {
// Do not paginate on scroll if chunks are used and
// the current chunk is complete.
var chunckSize = settings.paginateOnScrollChunkSize;
if (!chunckSize || loadedPages % chunckSize) {
element.find(settings.moreSelector).click();
} else {
element.find(settings.moreSelector).addClass('endless_chunk_complete');
}
}
});
}
// Digg-style pagination.
element.on('click', settings.pagesSelector, function() {
var link = $(this),
html_link = link.get(0),
context = getContext(link);
// Fire onClick callback.
if (settings.onClick.apply(html_link, [context]) !== false) {
var page_template = link.closest(settings.pageSelector),
data = 'querystring_key=' + context.key;
// Send the Ajax request.
page_template.load(context.url, data, function(fragment) {
// Fire onCompleted callback.
settings.onCompleted.apply(
html_link, [context, fragment.trim()]);
});
}
return false;
});
});
};
$.endlessPaginate = function(options) {
return $('body').endlessPaginate(options);
};
})(jQuery);
标题>简短的回答:不。"无尽分页"的全部意义在于而不是重新加载(新)页面,因此没有历史记录。
相关文章:
- 是否可以在浏览器中使用纯JavaScript保存音频流
- 当使用ajax并将html数据保存为对象时,收听浏览器返回按钮.好的或坏的
- 如何在浏览器重新加载时保存位置哈希状态
- ReactJS:使用浏览器按钮导航时保存状态
- zp.midpass.ru如何在浏览器中保存数据
- 关闭浏览器后保存变量
- 在浏览器刷新时保存XHR渲染状态
- 在我的浏览器中用类似ctrl+s的PhantomJS保存一个网站
- GWT:在浏览器中保存URL'的书签部分
- 如何将调整后的密码保存到浏览器
- 正在将文件写入HttpResponse,浏览器未提示保存
- 将从浏览器创建的文件保存到磁盘 - 不能在 Firefox 上使用新的 File()
- 如何在浏览器中触发另存为对话框,以便可以在内存中保存 json 数据
- 将图像输出到浏览器,然后再将其保存到文件夹
- 在web浏览器中保存操作过的SVG图像
- 禁用浏览器自动选项(显示输入元素中保存的单词)
- 在注册表单上,表单字段不会保存在提交时自动填充的浏览器中.(ReactJs)
- Javascript:保存和恢复浏览器窗口大小
- 使用django-el-pagination(延迟分页)保存浏览器历史记录
- 从
标记保存浏览器缓存图像,而不使用 src 属性