文章目录

# pushState

window.history.pushState(state, title, url);

其中state和title都可以为空，但是推荐不为空，应当创建state来配合popstate监听。

例如，我们通过pushState现改变URL而不刷新页面。

var state = ( {

url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE

} );

window.history.pushState(state, ~title, ~href);

其中带有“”符号的是自定义内容。就可以把这个href（URL）推送到浏览器的历史里。如果想要改变网页的标题，应该：

document.title= ~newTitle;

注意只是pushState是不能改变网页标题的哦。

# replaceState 同理

同理

window.history.replaceState( state, ~title, ~href);

# pushState、replaceState 的区别

  • pushState()可以创建历史，可以配合popstate事件
  • <mark>而replaceState()则是替换掉当前的URL，不会产生历史</mark>。

# 限制因素

只能用同域的URL替换，例如你不能用http://baidu.com去替换http://google.com。而且state对象不存储不可序列化的对象如DOM。

# Ajax 配合 pushState 例子

$("~target a").click(function(evt){

evt.preventDefault(); // 阻止默认的跳转操作

var uri=$(this).attr('href');

var newTitle=ajax_Load(uri); // 你自定义的Ajax加载函数，例如它会返回newTitle

document.title=newTitle; // 分配新的页面标题

if(history.pushState){

var state=({

url: uri, title: newTitle

});

window.history.pushState(state, newTitle, uri);

}else{ window.location.href="#!"+~fakeURI; } // 如果不支持，使用旧的解决方案

return false;

});

function ajax_Load(uri){ ... return newTitle; } // 你自定义的ajax函数，例如它会返回newTitle

即可完成pushState。

至于新标题newTitle的获取就是另外的问题了，例如你可以为a标签分配 data-newtitle=~title 属性并届时读取，或者如果你用的 $.ajax() 函数，可以用 $(result).filter("title").text() 来获取。

另外如果需要对新加载的页面的连接同样使用这个ajax，则需要对新内容的a标签重新部署，例如

$("~newContentTarget a").click(function(evt){ ... });

# pushState 配合 popstate 监听

想要良好的支持浏览器的历史前进后退操作，应当部署popstate监听：

window.addEventListener('popstate', function(evt){

var state = evt.state;

var newTitle = ajax_Load(state.url); //你自定义的ajax加载函数，例如它会返回newTitle

document.title=newTitle;

}, false);

提醒，你可以通过setRequestHeader()来让服务器端配合你的ajax请求输出专门的内容。

# 流程图示意

这个例子的大致过程如下图所示

# jQuery + PJAX 插件 - 推荐

已经在github上发布，有人把PJAX做成了jQuery插件，方便调用，节省大量代码：

if ($.support.pjax) {

$(document).on('click', 'a[data-pjax]', function(event) {

var container = $(this).closest('[data-pjax-container]')

$.pjax.click(event, {container: container})

});}

# 归档

  • 【特别感谢】《使用pushState()改变url而不刷新》http://caibaojian.com/pushstate.html
  • https://www.jb51.net/html5/606481.html
  • 《pushState 与 路由》 - http://ife.baidu.com/note/detail/id/3136