在前端开发中，我们很喜欢一种风格，就是页【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。面无刷新，加载新的页面。但是在ajax的原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net加载中，有一个问题，就是页面加载进来很容【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】易，却无法做到在浏览器的前进、倒退时，正【本文首发于唐霜的博客】原创内容，盗版必究。确的使用页面。那么，怎么来实现这种风格呢本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net？一般而言，有两种形式，一种是通过has原创内容，盗版必究。【作者：唐霜】h的变化来确定ajax要加载哪个页面，另本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。一种则是我们这篇文章重点要使用的hist【本文首发于唐霜的博客】【转载请注明来源】ory.pushState方法。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】【版权所有，侵权必究】

history.replaceState【版权所有】唐霜 www.tangshuang.net【本文受版权保护】实现静态化的url改变

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

这是一个html5的特性，仅高级浏览器可本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】以支持，低版本的浏览器是不支持的，因此我【本文受版权保护】【未经授权禁止转载】们在文末会讨论兼容方案。

【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】

history.state我们会用到四个【作者：唐霜】【作者：唐霜】动作，第一个动作就是history.re【转载请注明来源】转载请注明出处：www.tangshuang.netplaceState。它的作用是使his本文作者：唐霜，转载请注明出处。【作者：唐霜】tory.state的内容发生变化，这个【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】变化在外在表现来看，就是url的变化：

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

var url = '/url_to_load',selector = '#content';
$.ajax({
  url: url,
  type: 'get',
  success: function(html) {
    var content = $(html).find(selector).html(), title = $(html).find('title').html();
    $(selector).html(content);
    document.title = title;
    var state = {
      url: url,
      title: title,
      selector: selector,
      content: content
    }
    window.history.replaceState(state,title,url);
  }
});

在上面这个代码中，我们首先使用到了rep【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】laceState这个方法。它的第一个参【关注微信公众号：wwwtangshuangnet】【转载请注明来源】数就是history.state，我们会【本文受版权保护】原创内容，盗版必究。在下文用到，如果仅仅是为了实现url的变原创内容，盗版必究。【未经授权禁止转载】化，完全可以先无视state参数，把这段【原创不易，请尊重版权】【转载请注明来源】代码简化为：

【转载请注明来源】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

var url = '/url_to_load',selector = '#content';
$.ajax({
  url: url,
  type: 'get',
  success: function(html) {
    var content = $(html).find(selector).html(), title = $(html).find('title').html();
    $(selector).html(content);
    document.title = title;
    window.history.replaceState(null,null,url);
  }
});

把replaceState方法的第一个和未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。第二个参数都可以设置为null，这样仅仅本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net实现了url的变化。history.re原创内容，盗版必究。【未经授权禁止转载】placeState可以在任何时候使用，未经授权，禁止复制转载。【版权所有，侵权必究】不一定非得在$.ajax中，一旦通过hi【作者：唐霜】本文作者：唐霜，转载请注明出处。story.replaceState修改【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.neturl之后，刷新浏览器页面，就会打开改变原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。后的地址，而与改变之前的页面无关了。

本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】原创内容，盗版必究。【未经授权禁止转载】

history.pushState向浏览本文作者：唐霜，转载请注明出处。【转载请注明来源】器历史记录中新增状态内容

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

虽然我们在上面实现了无刷新改变url，但原创内容，盗版必究。未经授权，禁止复制转载。是当我们通过浏览器前进倒退时，却无法做到转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。瞬间打开之前的页面。为了实现这个效果，我【转载请注明来源】原创内容，盗版必究。们使用到history.pushStat【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】e，不过需要注意的是，它只是其中必须的一【作者：唐霜】著作权归作者所有，禁止商业用途转载。个部分，而不是我们实现这个效果的全部。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

在上面的代码中，我们已经发现了repla【本文首发于唐霜的博客】【原创内容，转载请注明出处】ceState方法的第一个参数是stat【未经授权禁止转载】【未经授权禁止转载】e，它就是一个历史记录的内容，但是它改变【原创不易，请尊重版权】【版权所有，侵权必究】的是当前的历史记录的内容。我们可以这么去【本文受版权保护】本文作者：唐霜，转载请注明出处。思考：

【原创内容，转载请注明出处】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

url_1 => state_1【版权所有，侵权必究】

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【未经授权禁止转载】【本文受版权保护】本文作者：唐霜，转载请注明出处。

url_2 => state_2 未经授权，禁止复制转载。未经授权，禁止复制转载。// current

【原创不易，请尊重版权】【未经授权禁止转载】【本文首发于唐霜的博客】

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。

一个url对应一个state，这个sta本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。te的内容是没有任何关系的，除了url这原创内容，盗版必究。【原创内容，转载请注明出处】个属性是必须的意外，其他的任何属性，都可【转载请注明来源】【未经授权禁止转载】以我们自己来规定。而且这个state跟页【本文首发于唐霜的博客】原创内容，盗版必究。面的展示几乎没有什么关系（在没有用到的a著作权归作者所有，禁止商业用途转载。【本文受版权保护】jax的情况下除外），它就是一个临时的变【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。量，而且是和url一一对应的。

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【转载请注明来源】著作权归作者所有，禁止商业用途转载。

例如我们当前访问的页面是url_2，那么【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。对应的就是state_2，它的内容我们是著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】不知道的。但是当我们执行history.转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】replaceState(state_3未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。,title_3,url_3)的时候，我【原创不易，请尊重版权】【未经授权禁止转载】们原本以为历史记录中变成了：

【版权所有】唐霜 www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

url_1 => state_1转载请注明出处：www.tangshuang.net

原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net

url_2 => state_2【本文受版权保护】

【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

url_3 => state_3【原创内容，转载请注明出处】

【原创不易，请尊重版权】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有，侵权必究】【版权所有，侵权必究】

但是实际上，当前历史记录中的结果却是：转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

url_1 => state_1u【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】rl_3 => state_3 /转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。/ current

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】【转载请注明来源】转载请注明出处：www.tangshuang.net

【本文受版权保护】【转载请注明来源】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】

也就是当前原本是url_2的内容，被全部转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。替换为了url_3的内容。

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

当你点击浏览器的返回按钮的时候，页面进入本文作者：唐霜，转载请注明出处。原创内容，盗版必究。了url_1。怎么才能得到我们想要的结果【转载请注明来源】本文版权归作者所有，未经授权不得转载。呢？这时pushState方法就来了。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】未经授权，禁止复制转载。

在执行replaceState之前，我们【转载请注明来源】【版权所有，侵权必究】做这样的一个动作：

【转载请注明来源】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

var state = {
  url: window.loaction.href,
  title: document.title,
  selector: '#content',
  content: $('#content').html()
};
history.pushState(state,state.title,state.url);

这样，就将当前页面的内容加入到历史记录中本文版权归作者所有，未经授权不得转载。【作者：唐霜】，也就是上面我们想象的url_1,url【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net_2,url_3的顺序。当执行完repl【未经授权禁止转载】转载请注明出处：www.tangshuang.netaceState后，点击浏览器的后退按钮【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，浏览器就调用出来了url_2的内容。所【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】以，我们将上面的代码进行修改，得到：

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】

var url = '/url_to_load',selector = '#content';
$.ajax({
  url: url,
  type: 'get',
  success: function(html) {
    var state = {
      url: window.loaction.href,
      title: document.title,
      selector: '#content',
      content: $('#content').html()
    };
    history.pushState(state,state.title,state.url);

    var content = $(html).find(selector).html(), title = $(html).find('title').html();
    $(selector).html(content);
    document.title = title;

    var state = {
      url: url,
      title: title,
      selector: selector,
      content: content
    }

    window.history.replaceState(state,title,url);
  }
});

通过监听window的popstate事本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】件来确定是否改变页面内容

【原创不易，请尊重版权】【作者：唐霜】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有，侵权必究】

当完成上面两个步骤之后，我们的浏览器历史【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net记录中，就有了对应的几个url，以及它们未经授权，禁止复制转载。【本文受版权保护】对应的state。当我们点击浏览器的前进未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net或后退按钮的时候，url就会发生变化，但【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】是，如果我们不执行下面的动作，页面就不会【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】有任何的改变。

【作者：唐霜】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

我们在脚本中加入如下的代码：本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【转载请注明来源】

$(window).bind("popstate", function() {
  // 当url发生变化时，你想做什么？
});

通过给window绑定popstate事【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。件监听，可以在点击浏览器的前进和后退时，著作权归作者所有，禁止商业用途转载。【转载请注明来源】执行某些动作。

本文作者：唐霜，转载请注明出处。【作者：唐霜】本文作者：唐霜，转载请注明出处。【本文受版权保护】

通过history.state取出我们需【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。要的状态内容

【原创内容，转载请注明出处】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

但是，我们怎么样才能让我们之前的内容重新本文作者：唐霜，转载请注明出处。原创内容，盗版必究。恢复到原来的页面中呢？有些人选择的办法是本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】，在popstate事件监听的回调中，再本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net用ajax去请求对应的url内容。这种做【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】法显然的低效的。如果你按照我们上面的代码【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】那样去做，那很好，你需要的内容已经保存在【作者：唐霜】本文作者：唐霜，转载请注明出处。history.state中了。

【作者：唐霜】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

$(window).bind("popstate", function() {
  var state = history.state;
  if(state.selector == undefined) return; // 第一次访问页面的时候，selector属性不存在，不用执行动作
  if(state.content == undefined) return; // 同上
  $(state.selector).html(state.content);
  document.title = state.title;
  window.history.replaceState(state,state.title,state.url);
});

我们在前面的pushState动作中，通【原创不易，请尊重版权】【转载请注明来源】过把selector和对应的conten【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。t都放到了history.state中，【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】所以，现在把它取出来，直接替换掉页面中的【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】内容即可，包括替换网页标题和select【本文受版权保护】原创内容，盗版必究。or区域内的html内容。

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

这里有一个state顺序需要注意一下。比【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】如，我们通过pushState和repl转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netaceState，最终得到了如下的his本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】tory.state列表：

【本文首发于唐霜的博客】【原创内容，转载请注明出处】【作者：唐霜】

url_1 => state_1【版权所有】唐霜 www.tangshuang.net

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创不易，请尊重版权】【版权所有，侵权必究】【版权所有，侵权必究】

url_2 => state_2本文版权归作者所有，未经授权不得转载。

【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

url_3 => state_3 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】// current

原创内容，盗版必究。【原创内容，转载请注明出处】未经授权，禁止复制转载。【原创不易，请尊重版权】

url_4 => state_4【转载请注明来源】

未经授权，禁止复制转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

【版权所有，侵权必究】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】

这是，当我们点击后退按钮时，url切换到转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】了url_2，同时在window的pop【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】state事件监听回调函数中，histo【本文首发于唐霜的博客】未经授权，禁止复制转载。ry.state也变为了state_2，【本文受版权保护】【作者：唐霜】而不是state_3。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

基于history.state的无刷新页未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。面加载插件制作

【原创不易，请尊重版权】【本文受版权保护】本文作者：唐霜，转载请注明出处。

既然我们已经知道了这一系列的原理，那么接【作者：唐霜】【原创不易，请尊重版权】下来，我们自己来写一个插件，可以方便我们【原创内容，转载请注明出处】【原创内容，转载请注明出处】直接在项目中重复使用这个插件，实现我们想【作者：唐霜】【版权所有】唐霜 www.tangshuang.net要的无刷新页面加载效果。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【本文受版权保护】

!function(dependencies,factory){
  // amd || cmd
  if(typeof define == 'function' && (define.cmd || define.amd)) {
    define(dependencies,function() {
      return factory();
    });
  }
  else {
    var ex = factory();
    // CommonJS NodeJS
    if(typeof module !== 'undefined' && typeof exports === 'object') {
      module.exports = ex;
    }
  }
}(['jquery'],function(){
  $.ajaxPage = function(options) {
    var defaults = {
      url: window.location.href,
      find: '#ajax-body',
      replace: '#ajax-body',
      beforeSend: null,
      success: null,
      error: null,
      complete: null
    };
    if(typeof options === 'string') defaults.url = options; // 如果传入的参数是url地址
    options = $.extend(defaults,options);
    $.ajax({
      url: options.url,
      beforeSend: function() {
        $('html').addClass('ajax-loading');
        if(typeof options.beforeSend === 'function') options.beforeSend();
      },
      success: function(result) {
        var state = {
          title: document.title,
          url: window.location.href,
          selector: options.replace,
          content: $(options.replace).html()
        };

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

        var $html = $('<div></div>').append(result);
        var title = $html.find('title').html();
        var content = $html.find(options.find).html();

        document.title = title;
        $(options.replace).html(content);
        // 下面这段代码是为了解决微信中document.title只执行一次的问题，有了这段代码，微信里面的document.title也会跟着一起变化
        var ua = navigator.userAgent.toLowerCase();
        if(ua.indexOf('micromessenger') > -1 && ua.indexOf('iphone') > -1) {
          var $iframe = $('<iframe src="/favicon.ico"></iframe>');
          $iframe.on('load',function(){
            setTimeout(function() {
              $iframe.off('load').remove();
            },0);
          }).appendTo('body');
        }

        state = {
          title: title,
          url: options.url,
          selector: options.replace,
          content: content
        };

        window.history.replaceState(state, title, options.url);
  
        if(typeof options.success === 'function') options.success(result);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        if(typeof options.error === 'function') options.error(XMLHttpRequest, textStatus, errorThrown);
        if(options.loading) $.hideLoading();
      },
      complete: function(XMLHttpRequest, textStatus) {
        $('html').removeClass('ajax-loading');
        if(typeof options.complete === 'function') options.complete(XMLHttpRequest, textStatus);
      }
    });
  };
  $(window).bind("popstate", function() {
    var state = history.state;
    if(state.selector == undefined) return; // 第一次访问页面的时候，selector属性不存在，不用执行动作
    if(state.content == undefined) return; // 同上
    $(state.selector).html(state.content);
    document.title = state.title;
    window.history.replaceState(state,state.title,state.url);
  });
});

首先，我们使用了【作者：唐霜】omd【本文受版权保护】框架来让插件兼容各种模式下的调用。接着，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。我们根据上面的原理，写了$.ajaxPa【本文受版权保护】原创内容，盗版必究。ge，最后，给window绑定了pops本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。tate事件。

【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

使用方法：著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net

首先是了解插件传入值有两种，第一种是ur【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。l，第二种是对象。如果传入字符串，其他选【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net项将使用默认值，如果传入对象，则可以规定【原创内容，转载请注明出处】【版权所有，侵权必究】更多内容。

【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【原创内容，转载请注明出处】

我们来看一个例子：【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【作者：唐霜】【原创不易，请尊重版权】

a.html: 本文版权归作者所有，未经授权不得转载。所有的页面的内容，都放在#ajax-bo【本文首发于唐霜的博客】【版权所有，侵权必究】dy中，把#ajax-body当做bod【转载请注明来源】【原创内容，转载请注明出处】y来用，这个地方有点难度，需要功力深一点【未经授权禁止转载】原创内容，盗版必究。才能理解为什么

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【未经授权禁止转载】未经授权，禁止复制转载。未经授权，禁止复制转载。

<html>
  ...
  <body>
    <div id="ajax-body"><a href="ajax.html">ajax</a></div>
  </body>
</html>

javacript1.js:【版权所有】唐霜 www.tangshuang.net

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

jQuery(function($){
  $(document).on('click','a[href]',function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $.ajaxPage(url);
  });
});

javacript2.js:【本文首发于唐霜的博客】

【原创不易，请尊重版权】【本文受版权保护】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

jQuery(function($){
  $(document).on('click','a.only-content[href]',function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $.ajaxPage({
      url: url,
      find: '#content',
      replace: '#content'
    });
  });
});

兼容性问题【本文受版权保护】

【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

文章最开始，我们已经预告了末尾要讨论兼容【版权所有，侵权必究】未经授权，禁止复制转载。性问题。这里主要是指，在部分浏览器中并不本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。支持history.pushState和本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。history.replaceState本文作者：唐霜，转载请注明出处。【本文受版权保护】的操作，也没有window.popsta原创内容，盗版必究。转载请注明出处：www.tangshuang.nette事件，这就会使得我们在点击前进后退，【未经授权禁止转载】未经授权，禁止复制转载。会直接打乱我们在这个插件中的一些预期。因【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】此，我们可以采用一些兼容性方案。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

首先是判断是否可以使用pushState【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。和replaceState方法：

未经授权，禁止复制转载。【转载请注明来源】【本文受版权保护】著作权归作者所有，禁止商业用途转载。

if(history && history.pushState) {
  ...
}

在这个地方有一个基本的语法常识，就是&a【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。mp;&运算与&运算的区本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】别。如果history=undefine【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。d，这个时候直接使用if(history.pushState)进行判断的话，会导致错误而终止程序执行。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【作者：唐霜】

如果浏览器不支持history.push【原创不易，请尊重版权】【本文受版权保护】State，那么怎个插件的url和his【转载请注明来源】未经授权，禁止复制转载。tory部分会失效，而ajax部分会起效【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。（当然，会由于报错而终止），所以，就必须【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net采用其他的方法来替代。最好的替代方案就是【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】hash办法，这我们会在另外的文章中去详未经授权，禁止复制转载。未经授权，禁止复制转载。解。

【未经授权禁止转载】【原创不易，请尊重版权】【本文受版权保护】【转载请注明来源】未经授权，禁止复制转载。

2016-03-13 11451 ajax