缘起
在开发一个应用系统特别是做后台管理系统的时候，每次刷新全部页面即浪费流量，又消耗服务器资源、还会让界面闪动，用户体验不好，这是为什么要使用Ajax的原因。
而使用了Ajax后，发现使用浏览器的后退键不管用了。这很不方便，这就需要使用html5提供的history功能。
思路
ajax加载
这用jquery很简单，看代码
$("#mycontent").load(url);
这样就将url中的html片段加载到id为mycontent的div之中了。
如何让history知道加载了新页面
使用
history.pushState(state,title,url)。
可以看到这有三个参数，第一个参数存储一些自定义的信息，比如ajax块的url之类。第二个参数没啥用。
第三个参数影响浏览器地址栏显示的url。这个url可以处理一下，让用户点击刷新浏览器按钮时也能正确进入这个ajax页。
比如我用的方法
http://127.0.0.1:1985/?child=/case/list?type=flfg&title=%E6%B3%95%E8%A7%84%E5%88%97%E8%A1%A8
child参数为ajax页需要加载的url，这样主页发现有child参数时就加载它。
如何知道用户点击了回退
用户点击后退键会触发popstate事件。 在此事件中从state中读取到url，并加载到DIV中。
绑定哪些a标签
并非所有的超链接都需要在div中显示， 这时候需要加一个选择器， 我用的方法是为a标签加一个class。
有的童鞋喜欢用”#hahadiv a” 也可以。
如何让div中ajax加载的网页中的连接继续使用ajax加载
如上图中的列表中的连接点击后如何仍在div中显示。
方法： 在load函数的回调中，加入绑定函数丶调用。
对于jquery datatable 这种动态生成的连接，如何绑定
在连接动态生成完成以后，再调用绑定函数，下面例子中绑定函数为bindDivA这个函数。
datatable绘制完成后的代码例子
table.on( 'draw',function () {
console.log( 'Redraw occurred at: '+new Date().getTime() );
bindDivA();
} );
题外话 jquery datatable如何保存状态
这是个很好用的空间， 它有stateSave功能。
var table = $('#example2').DataTable( {
"processing": true,"serverSide": true,"ajax": {
"url": "/case/listJSON?type=${type}","type": "POST"
},"columns": [
{'data': 'id'},{'data': 'title'},{'data': 'type'},{'data': 'qi'},{'data': 'addtm'},{'data': 'cat'},],"columnDefs": [ {
"targets": 1,"data": "title","render": function ( data,type,row,Meta ) {
//console.log(row);
var id = row["id"];
return "<a class='inframe' href='/case/one?id={0}'>{1}</a>".format(""+id,data);
}
} ],stateSave: true,stateSaveCallback: function(settings,data) {
localStorage.setItem( 'clist_DataTables_' + settings.sInstance,JSON.stringify(data) )
},stateLoadCallback: function(settings) {
return JSON.parse( localStorage.getItem( 'clist_DataTables_' + settings.sInstance ) )
}
} );
写的时候掉进去的一个坑
刚开始调试的时候， 发现有的能回退有的不能回退。查了发现click函数忘了写return false;
结果点击一个连接相当于pushState两次。一次是我们代码写的，一次是浏览器自己push 的。
浏览器自己push的当然没有state参数，所以呵呵了。
直接上代码
//-------------------- 历史管理 -----------------------------------
function loadToDiv(url,usePush){
$("#mycontent").load(url,function (e) {
bindDivA();
});
if(title){
$("#contentHeader").html(title);
}
var state = { 'pageurl':url,'pagetitle':title};
if(usePush){
console.log("push state of "+state);
history.pushState(state,"/?child="+url+"&title="+$("#contentHeader").text());
}
}
function bindDivA(){
console.log("bindInframeA called");
$(".inframe").bind("click",function(e){
//var href = this.href;
var href = $(this).attr("href");
var title = $(this).text();
console.log("visit href "+href);
loadToDiv(href,true);
return false;
});
}
$(document).ready(function(){
bindDivA();
});
if (history.pushState) {
window.addEventListener("popstate",function() {
console.log("popstate called,href="+location.href +",state = "+history.state);
if(! history.state) return;
console.log(history.state);
loadToDiv(history.state.pageurl,history.state.pagetitle,false);
});
}
//-------------------- 历史管理 结束 -----------------------------------
我不想搞懂，如何简单使用？
1 将这个代码写入自己的js文件中，在页面中引用。
2 写个div，id为mycontent 用以加载ajax内容
3 在需要在div中加载的链接上加入 class=”inframe”
ok了。
