Ajax加载与点击浏览器后退按钮回退

2020-06-29 原文

缘起

在开发一个应用系统特别是做后台管理系统的时候，每次刷新全部页面即浪费流量，又消耗服务器资源、还会让界面闪动，用户体验不好，这是为什么要使用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了。

参考

[1] http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/comment-page-1/#comment-382378