让搜索引擎抓取AJAX内容

QMS

	越来越多的网站，开始采用单页面结构（Single-page application），称单页应用。 整个网站只有一张网页，采用Ajax技术，根据用户的输入，加载不同的内容。 这种做法的好处是用户体验好、节省流量，缺点是AJAX内容无法被搜索引擎抓取。 Jquery Mobile是一个移动网页开发框架，可以很方便地使用无刷新切换页面，它采用的就是 History API。 所谓 History API，指的是不刷新页面的情况下，改变浏览器地址栏显示的URL(准确说，是改变网页的当前状态)。这里有一个例子，你点击上方的按钮，开始播放音乐。然后，再点击下面的链接，看看发生了什么事？ [不中断音乐切换页面链接][1] History API 的作用就是在浏览器的History对象中，添加一条记录 window.history.pushState(state object, title, url); 复制代码 目前，各大浏览器都支持这个方法：Chrome（26.0+），Firefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。 例子 首先建3个页面，这是让搜索引擎抓取的页面，要保证页面里面有让搜索引擎抓取的内容。 example.com/1.html example.com/2.html example.com/3.html 然后，定义一个JavaScript函数，处理Ajax部分，根据网址抓取对应内容。 function anchorClick(link) {     var linkSplit = link.split('/').pop();     $.get('api/' + linkSplit, function(data) {         $('#content').html(data);     }); } 复制代码 再定义鼠标的click事件，让页面模拟跳转到example.com/1.html, example.com/2.html, example.com/3.html。 $('#container').on('click', 'a', function(e) {     window.history.pushState(null, null, $(this).attr('href'));     anchorClick($(this).attr('href'));     e.preventDefault(); }); 复制代码 最后还要考虑到用户点击浏览器的"前进 / 后退"按钮。这时会触发History对象的popstate事件。 window.addEventListener('popstate', function(e) {          anchorClick(location.pathname);      }); 复制代码 文章来源：zhile.name