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与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
Vuex模块化应用实践示例
Feb 03 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php下将XML转换为数组
2010/01/01 PHP
php判断linux下程序问题实例
2015/07/09 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python Django批量导入不重复数据
2016/03/25 Python
浅谈python中的占位符
2017/11/09 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
音乐专业自荐信
2014/02/07 职场文书
教师党员一句话承诺
2014/03/28 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript