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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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
PHP静态新闻列表自动生成代码
2007/06/14 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
用jquery来定位
2007/02/20 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python简单实现获取当前时间
2016/08/27 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
开展读书活动总结
2014/06/30 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
优秀员工自荐书
2015/03/06 职场文书
父母教会我观后感
2015/06/17 职场文书
工作简报格式范文
2015/07/21 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript