JavaScript的History API使搜索引擎抓取AJAX内容


Posted in Javascript onDecember 07, 2015

大家在浏览Facebook的相册时有没有发现,页面局部刷新的同时地址栏的地址也改变了,而且不是hash的方式。它使用的就是HTML5 history新增的几个API,作为window的一个全局变量,在HTML4的时代history已不是什么新鲜的事物了。我们经常使用的就有 history.back()以及history.go() 。

我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝。

JavaScript的History API使搜索引擎抓取AJAX内容

Discourse是一个论坛程序,严重依赖Ajax,但是又必须让Google收录内容。它的解决方法就是放弃井号结构,采用 History API。

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

JavaScript的History API使搜索引擎抓取AJAX内容

地址栏的URL变了,但是音乐播放没有中断!

History API 的详细介绍,超出这篇文章的范围。这里只简单说,它的作用就是在浏览器的History对象中,添加一条记录。

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

上面这行命令,可以让地址栏出现新的URL。History对象的pushState方法接受三个参数,新的URL就是第三个参数,前两个参数都可以是null。

window.history.pushState(null, null, newURL);

目前,各大浏览器都支持这个方法:Chrome(26.0+),Firefox(20.0+),IE(10.0+),Safari(5.1+),Opera(12.1+)。

下面就是Robin Ward的方法。

首先,用History API替代井号结构,让每个井号都变成正常路径的URL,这样搜索引擎就会抓取每一个网页。

example.com/1
 

example.com/2
 

example.com/3

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

 function anchorClick(link) {
 
var linkSplit = link.split('/').pop();
 

$.get('api/' + linkSplit, function(data) {
 


$('#content').html(data);
 

});
 
} 

再定义鼠标的click事件。

$('#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); 
 
}); 

定义完上面三段代码,就能在不刷新页面的情况下,显示正常路径URL和AJAX内容。

最后,设置服务器端。

因为不使用井号结构,每个URL都是一个不同的请求。所以,要求服务器端对所有这些请求,都返回如下结构的网页,防止出现404错误。

  <html>
 
<body>
 


<section id='container'></section>
 


<noscript>
 



... ...
 


</noscript>
 

</body>
 
</html>

仔细看上面这段代码,你会发现有一个noscript标签,这就是奥妙所在。

我们把所有要让搜索引擎收录的内容,都放在noscript标签之中。这样的话,用户依然可以执行AJAX操作,不用刷新页面,但是搜索引擎会收录每个网页的主要内容!                  

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
基于jquery的表格排序
Sep 11 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 #Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 #Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 #Javascript
javascript字符串函数汇总
Dec 06 #Javascript
win7下安装配置node.js+express开发环境
Dec 06 #Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 #Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 #Javascript
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php include,include_once,require,require_once
2008/09/05 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Angular的$http与$location
2016/12/26 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python3基础之函数用法
2014/08/13 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
工作岗位说明书模板
2014/05/09 职场文书
承诺书范文
2014/06/03 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
储备店长岗位职责
2015/04/14 职场文书
企业党员岗位承诺书
2015/04/27 职场文书