最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退。
首先说说pushState(),这个函数将当前的url等信息加入history堆栈中;
当点击浏览器的前进后退按钮时,会触发popstate事件,所以可以在onpopstate的时候使用ajax实现局部刷新前进后退。
我的方法(用jQuery):
1、定义两个函数
function ajaxLoad(){
//里面加载ajax
};
function setState(){
var stateobj = ({//里面存放url等信息,stateobj将作为pushState()的第一个参数
url:url,
title:title
});
window.history.pushState(stateobj,null,url);//将当前url加入堆栈中
};
$('a').on('click',function(event){//假设点击a标签加载ajax
event.preventDefault();//防止跳转
ajaxLoad();
setState();
});
window.addEventListener('popstate', function(event) {
var state = event.state;//取得目标u