个人头像

柠檬酸

24小时前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

HTML5–pushState、replaceState函数

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

前言:

一直搞不清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
TAGS:  
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : HTML5–pushState、replaceState函数

4 条评论

  1. qq_avatar xiaomo 说道: 来自 Firefox 54.0 in Windows 10
    2017-08-09 20:54

    我也在学习web端,同道了 :evil:

  2. qq_avatar 柠檬酸 说道: 来自 Google Chrome 50.0.2661.102 in Windows 8.1
    2017-07-29 15:39

    你好啊

    • qq_avatar 说道: 来自 Google Chrome 38.0.0.0 in Android 5.1.1
      2017-07-29 21:14

      @柠檬酸 你好你好 :evil: