转载

HTML5 简介（三）：利用 History API 无刷新更改地址栏

February 12, 2014 / 编程指南

HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。

简单来说：假设当前页面为renfei.org/，那么执行下面的 JavaScript 语句：

window.history.pushState(null, null, "/profile/");

之后，地址栏的地址就会变成renfei.org/profile/，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。

pushState 方法

上面的语句实际上用到了 HTML5 的历史记录 API。这套 API 提供一种「人为操纵」浏览器历史记录的方法。

浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。

执行pushState函数之后，会往浏览器的历史记录中添加一条新记录，同时改变地址栏的地址内容。它可以接收三个参数，按顺序分别为：

  1. 一个对象或者字符串，用于描述新记录的一些特性。这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。
  2. 一个字符串，代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。
  3. 一个字符串，代表新页面的相对地址。

例如，我们可以这样写：

var state = {
    id: 2,
    name: "profile"
};
window.history.pushState(state, "My Profile", "/profile/");

popstate 事件

当用户点击浏览器的「前进」、「后退」按钮时，就会触发popstate事件。你可以监听这一事件，从而作出反应。

window.addEventListener("popstate", function(e) {
    var state = e.state;
    // do something...
});

这里e.state就是当初pushState时传入的第一个参数。例如，在我们的例子中，有：

e.state.id == 2;
e.state.name == "profile";

replaceState 方法

有时，你希望不添加一个新记录，而是替换当前的记录（比如对网站的 landing page），则可以使用replaceState方法。这个方法和pushState的参数完全一样。

应用：全站 AJAX，并使浏览器能够抓取 AJAX 页面

这个可以干啥用？一个比较常用的场景就是，配合 AJAX。

假设一个页面左侧是若干导航链接，右侧是内容，同时导航时只有右侧的内容需要更新，那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样，地址栏是不会改变的，用户无法前进、后退，也无法收藏当前页面或者把当前页面分享给他人；搜索引擎抓取也有困难。这时，就可以使用 HTML5 的 History API 来解决这个问题。

思路：首先绑定click事件。当用户点击一个链接时，通过preventDefault函数防止默认的行为（页面跳转），同时读取链接的地址（如果有 jQuery，可以写成$(this).attr('href')），把这个地址通过pushState塞入浏览器历史记录中，再利用 AJAX 技术拉取（如果有 jQuery，可以使用$.get方法）这个地址中真正的内容，同时替换当前网页的内容。

为了处理用户前进、后退，我们监听popstate事件。当用户点击前进或后退按钮时，浏览器地址自动被转换成相应的地址，同时popstate事件发生。在事件处理函数中，我们根据当前的地址抓取相应的内容，然后利用 AJAX 拉取这个地址的真正内容，呈现，即可。

最后，整个过程是不会改变页面标题的，可以通过直接对document.title赋值来更改页面标题。

其他说明

URL 的限制

为了安全考虑，新 URL 必须和当前 URL 在同一个域名下。例如，你不能把地址改成 Google 的首页。否则不怀好心的人就可以把地址改成网银等关键网站的地址，来迷惑用户了。

但是，URL 允许使用 query string 的形式。例如：

window.history.pushState(null, null, "?id=1");

在某些情况下可能比较方便。

浏览器兼容性

根据 MDN 提供的信息，IE 10, Chrome 5, Firefox 4, Safari 5 开始支持这个特性。Fallback 可以采用替换 hash 的方法。另外，History.js 库也提供了对老版本浏览器的 history API 支持（同样是利用替换 hash）。为了搜索引擎收录，可能需要使用#!表示法。