JavaScript的历史API让搜索引擎抓取AJAX内容

浏览脸书的相册时，有没有注意到页面部分刷新时地址栏的地址发生了变化，而且不是hash方法？它使用了几个新添加的HTML5历史API。历史作为窗口的全局变量，在HTML4时代已经不是什么新鲜事了。我们经常使用history.back()和history.go()。

一直以为自己做不到，直到两天前看到话语创始人之一罗宾沃德的解决方案，不禁拍案叫绝。

话语是一个论坛程序，它严重依赖Ajax，但它必须让谷歌包含内容。其解决方案是放弃井号结构，采用历史API。

所谓历史API是指在不刷新页面的情况下改变浏览器地址栏中显示的URL(准确的说是改变网页的当前状态)。这里有一个例子，你点击上面的按钮，开始播放音乐。然后，点击下面的链接，看看发生了什么。

地址栏的URL发生了变化，但音乐播放没有中断！

对历史API的详细介绍超出了本文的范围。简单来说，它的功能是在浏览器的History对象中添加一条记录。

复制代码如下：window.history.pushstate(状态对象、标题、URL)；

上面的命令可以在地址栏中显示一个新的网址。History对象的pushState方法接受三个参数，新的URL是第三个参数，前两个参数可以为空。

window.history.pushState(null、null、new URl)；

目前各大浏览器都支持这种方式：Chrome(26.0)、Firefox(20.0)、IE(10.0)、Safari(5.1)、Opera(12.1)。

以下是罗宾沃德的方法。

首先用History API替换hash结构，让每个hash都成为正常路径的URL，这样搜索引擎就会抓取到每一个网页。

example.com/1example.com/2example.com/3

然后，定义一个JavaScript函数，处理Ajax部分，根据URL抓取内容(假设使用jQuery)。

函数anchorClick(link){ var linkSplit=link . split('/')。pop()；$.get('api/' linkSplit，函数(数据){ $('#content ')。html(数据)；});}然后定义鼠标点击事件。

$('#container ')。on('click '，' a '，function(e){ window . history . push state(null，null，$(this))。attr(' href ')；anchorClick($(这个)。attr(' href ')；e . PreventDefault()；});还要考虑用户点击浏览器的“前进/后退”按钮。此时，触发历史对象的popstate事件。

window . addeventlistener(' pop state '，函数(e){ anchorClick(location . pathname)；});定义了以上三个代码后，就可以显示正常路径URL和AJAX内容，而无需刷新页面。

最后，设置服务器端。

因为没有使用井号结构，所以每个网址都是不同的请求。因此，服务器需要为所有这些请求返回具有以下结构的网页，以防止404错误。

html body section id=' container '/section noscript/no script/body/html仔细看上面的代码，你会发现有一个no script标签，这就是秘密。

我们将搜索引擎中包含的所有内容放在noscript标签中。这样，用户仍然可以在不刷新页面的情况下执行AJAX操作，但搜索引擎会记录每个页面的主要内容！