ajax后退操作解决办法
ajax后退操作解决办法
作者:matrix 被围观: 3,474 次 发布时间:2017-09-19 分类:零零星星 | 无评论 »
这是一个创建于 1807 天前的主题,其中的信息可能已经有所发展或是发生改变。
使用github项目
https://github.com/browserstate/history.js
问题场景
移动端网页列表(上拉加载执行ajax请求)中要在点击item详情页跳转后可返回,且返回页面中需要看到或定位到点击的来源位置。
测试
要实现准确定位,刚开始想的基本原理也就是俩页面之间跳转传递分页数和滚动条位置的数量,想过sessionstorage对象来存储或是用url中hash值、query参数来传递相关状态,列表页面中进行判断请求数据且修改ajax加载的分页起始数,但是url中的参数需要和后台进行协调才可以达到满意的效果,实现起来也麻烦。搜索找到好多方案 貌似history.js兼容各大浏览器,效果应该比较理想。
JQ后加载History的js文件:/history.js/scripts/bundled/html4+html5/jquery.history.js
测试分页使用scrollPagination的JQ插件实现翻页:
var urlscroll = '';
var p = 1;
//获取缓存数据
//dom数据以及分页起始数
var dom = !!History.getState().data.dom?History.getState().data.dom:'';
var page = !!History.getState().data.p?History.getState().data.p:p;
p = page;
$(".test_list").append(dom);//追加缓存的dom
//end
$('.test_list').scrollPagination({
'contentPage': urlscroll, // the url you are fetching the results
'contentData': {'page':p}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 0, // it gonna request when scroll is 10 pixels before the page ends
'bottomHeight': $('.footer').height(), // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
//$('#loading-pic').show();
this.flagRequesting = 0;
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
//记录分页的dom数据
for (var i = 0; i < elementsLoaded.length; i++) {
dom += $(elementsLoaded[i]).html();
}
if(!!dom) History.pushState({'dom':dom,'p':this.contentData.page+1});//记录最后一次分页加载的dom数据以及下一页的起始数
//end
this.contentData.page++;
$(".test_list").append('<img src="/mobile/img/ads.jpg" class="ads_img">');
}
this.flagRequesting = 1;
}
});
上面代码仅测试,需自行修改。
主要起作用的位置是 记录分页的dom数据
和获取缓存数据
两处注释块。
道理还是那样,只是更优化了些。这里缓存了所有ajax分页的DOM数据和请求的最后的页码,当返回到列表页面的时候获取缓存DOM并加载,起始的分页数也会还原。
history.js内部也是使用sessionstorage来缓存相关数据,所以设置state数据的时候需要将DOM对象转换为String字符串数据就可以缓存整个分页数据。
实际使用中会发现个别时候item详情页面中执行history.go(-1)
或者点击A标签链接返回到列表页面的时候缓存的分页DOM数据可以正常的显示,但是滚动条定位就没达到想要的效果,所以要完美应该在获取缓存数据
的时候添加一个scrollTop滚动条的复位操作,这样应该就巴适了。
嗯~~今天遇到的这个问题还好解决了,感谢开源奉献的人们。
peace~
参考: http://www.cnblogs.com/songbyjson/p/4886615.html
五种解决方案:http://www.cnblogs.com/snandy/archive/2011/09/18/2180102.html
相关文章
- AJAX读音_ajax怎么发音
- Ajax教程_ajax是服务器端动态网页技术
- .ajax get 写法,原生Ajax写法(GET)
- Ajax两种同步的写法
- 【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- 使用微软的标准方法实现Ajax详解编程语言
- AJAX详解编程语言
- jQuery的ajax async同步和异步介绍详解编程语言
- 通过AJAX来做推送与轮询方式的比较详解编程语言
- Ajax与Linux:改变Web开发格局(ajaxlinux)
- 使用Ajax轻松访问和操作MySQL数据库(ajax访问mysql)
- Ajax实现MySQL读写服务接口(ajax读写mysql)
- 数据通过Ajax加载MySQL数据(ajax获取mysql)
- 学习Ajax基于MySQL的实例实践(ajax实例 mysql)
- 探究Ajax的MySQL驱动原理(ajax原理 mysql)
- 展现灵活性Ajax与MySQL的交互(ajax与mysql交互)
- MySQL与Ajax 精彩无穷的开发实现(ajax与mysql)
- AJAX技术简化Oracle数据库的访问处理(ajax连接oracle)
- Ajax实现对Oracle的异步操作(ajax操作oracle)
- Flash&Ajax操作XML实例:无刷新分页
- 解决了Ajax、MySQL和ZendFramework的乱码问题
- 一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
- Ajax的内部实现机制、原理与实践小结
- ASP+ajax注册即时提示程序代码
- PHP中运用jQuery的Ajax跨域调用实现代码
- Ajax+PHP快速上手及简单应用说明
- AJAX实现鼠标经过弹出详细介绍示例
- jquery+ajax+C#实现无刷新操作数据库数据的简单实例
- 使用ajax操作JavaScript对象