pushState+ajax实现左菜单右动态页面内容

以前都用iframe做左面菜单右面页面的切换，但是iframe不仅比较老化而且漏洞比较多比较麻烦，所以网上找了很多代替的办法，发现ajax不错，但是纯ajax做又少了前进后退的功能，所以需要结合HTML5的pushState，来实现前进与后退的功能，用ajax来实现也许还会有别的坑，但是目前还没有发现，等发现会继续总结

结合例子来学会这个功能，参考的网站https://blog.csdn.net/DecadentF/article/details/77982511

html代码

<!--两个菜单按钮，阻止a跳转，按钮中有点击事件，事件将网页名称封装为参数-->
<div class=""><a href="javascript:;" onclick="turnpage('rates')">待评价</a></div>
<div class=""><a href="javascript:;" onclick="turnpage('rated')">已评价</a></div>

<!--ajax加载的内容区域-->
<div class="mainbox">
                    
</div>

jq代码

window.onload = function(){ //页面刚加载或刷新时
        var url0 = document.URL;    //获取地址栏
    var num = url0.indexOf('?');    //判断有没有?
    var oldurl;
    var loadurl = num==-1?"rates":url0.slice(num+1, url0.length)
        //没有？加载指定页面，有？加载？后面的
    ajax1(loadurl)
}
window.onpopstate = function(event) {   //前进后退事件
    if(event.state == null){  //如果没有state，退到最后了就不再退
        return
    }else{
        ajax1(event.state.urld)  //否则就退
    }
};
function turnpage(url) {    //点击加载页面
    var url0 = document.URL;    //获取地址栏
    var num = url0.indexOf('?');    //判断有没有?
    var oldurl;
    if(num == -1) { //没有？oldurl为整个地址栏内容
        oldurl = url0;
    } else {
        oldurl = url0.slice(0, num);    //有？oldurl为？之前的
    }
    var newurl = oldurl + '?' + url;    //根据点击的重新拼接url
    if(url0==newurl)return false;   //如果重复点击同一链接不重复加载
    history.pushState({id:"5",title:"123",urld:url}, "标题", newurl);
    ajax1(url)
}
function ajax1(url){    //封装的ajax
    $.ajax({    //点击菜单时加载相应页面
        type: "get",
        url: url+'.html',
        success: function(html) {
            $('.mainbox').html(html);
        }
    });
}