00:00/
发布于2017-07-27 / 1461次浏览
一直搞不清pushState/replaceState/popstate之间的关系。
这几天有了理解,写一点自己的心得。
首先两者函数原型都是history.pushState/replaceState(state
, title, url
) ,一共有三个参数:
state:与要跳转到的URL对应的状态信息。
title:可以不传,现在很多浏览器都忽略。
url:要跳转到的URL地址,不能跨域。
函数参数上两者看似没有区别,但其实区别很大的:
pushState是添加历史记录
的,replaceState是不添加的,而是更改当前的state
。
popstate
并不是一个方法,而是html5的一个新事件。在用户按浏览器历史前进后退按钮时就会触发popstate
事件
调用方法可用:
window.addEventListener( 'popstate', function( e ){
if( e.state ){
//do someting
}
});
现在来说说ajax+pushstate。
我们都听说过pjax。pjax是对ajax+pushstate的封装。在基础上增加了支持本地存储、动画等方法。
大家平常用的pjax库一般都是基于jQuery,大小一般都是30K到100多K,其实核心代码就一部分。自己写的话可以少很多代码。
说一说wp实现pjax的方法。
如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。
换句话说:通过直接URL访问页面的方式进入页面,history.state是null。
所以我们需要把URL转换成对应的history.state写入。我们不能直接写入history.state,需要通过replaceState的方式写入。
第一次访问,state为空,通过点击发送ajax请求,发送之前先用replacestate记录state。成功后将页面替换。
ajax成功后把当前state通过pushstate写入history。demo代码如下:
$(document).on('click',"a[href!='']",function(){ //绑定所有a标签不为空的对象
var reqUrl=$(this).attr("href"); //当前url
if(typeof(reqUrl)=='undefined'||reqUrl=='')
return false;
$.ajax({
type: "POST",
url: reqUrl,
dataType: "html",
beforeSend:function(){
$("div#loading").show();
history.replaceState( // 刷新历史点保存的数据,给state填入正确的内容
{ url: window.document.location.href,
title: window.document.title,
html: $(document).find("#wrap").html(), // 抓取主体部分outerHTML用于呈现新的主体。
}, window.document.title, document.location.href);
},
success: function(data){
state = {
url: reqUrl,
title: $(data).filter("title").text(),
html: $(data).siblings("#wrap").html(),
};
$("#wrap").html(state.html); //替换新内容
document.title=$(data).filter("title").text(); //改变标题
window.history.pushState(state, $(data).filter("title").text(), reqUrl);//把历史记录塞进history,并改变url
rerun(); //回调函数
$("div#loading").fadeOut(); //隐藏loading动画
}
});
return false;
});
我也在学习web端,同道了
@xiaomo 加油,一起进步!
你好啊
@柠檬酸 你好你好