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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jQuery DIV弹出效果实现代码
Jul 03 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
移动端js触摸事件详解
Sep 18 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 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源码之 ext/mysql扩展部分
2009/07/17 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
pytorch forward两个参数实例
2020/01/17 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
房产继承公证书
2014/04/09 职场文书
员工培训协议书
2014/09/15 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
管辖权异议上诉状
2015/05/23 职场文书
公司业务员管理制度
2015/08/05 职场文书
2016年学校招生广告语
2016/01/28 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android