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

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

html代码

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);

}

});

}