[javascript] 让搜索引擎抓取AJAX内容

[复制链接]
发表于 2022-3-29 14:40:13
越来越多的网站,开始采用单页面结构(Single-page application),称单页应用。

整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容。

这种做法的好处是用户体验好、节省流量,缺点是AJAX内容无法被搜索引擎抓取。

Jquery Mobile是一个移动网页开发框架,可以很方便地使用无刷新切换页面,它采用的就是 History API。

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

[不中断音乐切换页面链接][1]


History API 的作用就是在浏览器的History对象中,添加一条记录

  1. 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部分,根据网址抓取对应内容。

  1. function anchorClick(link) {
  2.     var linkSplit = link.split('/').pop();
  3.     $.get('api/' + linkSplit, function(data) {
  4.         $('#content').html(data);
  5.     });
  6. }
复制代码


再定义鼠标的click事件,让页面模拟跳转到example.com/1.html, example.com/2.html, example.com/3.html。

  1. $('#container').on('click', 'a', function(e) {
  2.     window.history.pushState(null, null, $(this).attr('href'));
  3.     anchorClick($(this).attr('href'));
  4.     e.preventDefault();
  5. });
复制代码


最后还要考虑到用户点击浏览器的"前进 / 后退"按钮。这时会触发History对象的popstate事件。

  1. window.addEventListener('popstate', function(e) {     
  2.     anchorClick(location.pathname);     
  3. });
复制代码


文章来源:zhile.name




上一篇:Apache绑定多个域名及解决VirtualHost只有一个有效的问题
下一篇:Linux如何查看当前占用CPU和内存最多的进程