HTML5–pushState、replaceState函数

发布于2017-07-27 / 1461次浏览

前言：

一直搞不清pushState/replaceState/popstate之间的关系。

这几天有了理解，写一点自己的心得。

history.pushState和history.replaceState有啥区别？

首先两者函数原型都是history.pushState/replaceState(state, title, url) ，一共有三个参数：

state：与要跳转到的URL对应的状态信息。

title：可以不传，现在很多浏览器都忽略。

url：要跳转到的URL地址，不能跨域。

函数参数上两者看似没有区别，但其实区别很大的：

pushState是添加历史记录的，replaceState是不添加的，而是更改当前的state。

popstate事件

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

喜欢 0