js 抓取网页内容(Google的网络蜘蛛忽视URL的#部分，HTTP请求中不包括#)

　　js 抓取网页内容(Google的网络蜘蛛忽视URL的#部分，HTTP请求中不包括#)

　　# 用于引导浏览器操作，在服务器端完全没用。因此，# 不收录在 HTTP 请求中。

　　三、# 之后的字符

　　出现在第一个 # 之后的任何字符都将被浏览器解释为位置标识符。这意味着这些字符都不会发送到服务器。

　　比如下面这个 URL 的初衷就是指定一个颜色值：

　　#fff

　　但是，浏览器发出的实际请求是： ，省略了“#fff”。只有将#转码为%23，浏览器才会将其视为真实字符。

　　四、Change# 不会触发网页重新加载

　　只需更改#后面的部分，浏览器只会滚动到相应位置，网页不会重新加载，浏览器也不会重新向服务器请求。

　　五、Change# 会改变浏览器的访问历史

　　每次更改#后面的部分，都会在浏览器的访问历史中添加一条记录，您可以使用“返回”按钮返回到之前的位置。

　　这对于ajax应用特别有用，可以用不同的#值来表示不同的访问状态，然后给用户一个链接来访问某个状态。

　　需要注意的是，上述规则不适用于 IE 6 和 IE 7，它们不会因为 # 的变化而增加历史记录。

　　六、window.location.hash 读取#value

　　属性 window.location.hash 是可读写的。阅读时，可用于判断网页状态是否发生变化；写入时会创建访问历史记录，无需重新加载网页。

　　七、onhashchange 事件

　　这是一个新的 HTML 5 事件，在 # 值更改时触发。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+ 支持此事件。

　　有三种使用方法：

　　window.onhashchange = 函数；

　　window.addEventListener("hashchange", func, false);

　　对于不支持 onhashchange 的浏览器，可以使用 setInterval 来监控 location.hash 的变化。

　　八、谷歌抓取#机制

　　默认情况下，Google 的网络蜘蛛会忽略 URL 的 # 部分。

　　不过，谷歌也规定，如果想让Ajax生成的内容被浏览引擎读取，可以使用“#!” 在 URL 中，Google 会自动将其后面的内容转换为查询字符串 _escaped_fragment_ 的值。

　　如果找到推特网址：#!/username

　　将自动抓取另一个 URL：

　　通过这种机制，Google 可以索引动态 Ajax 内容。

　　如何让搜索引擎抓取 AJAX 内容

　　越来越多的网站开始使用“单页应用”，整个网站只有一个网页，使用Ajax技术根据用户的输入加载不同的内容，这种方式的优势就是用户体验好，节省流量。缺点是AJAX内容不能被搜索引擎抓取。

　　例如，网站 用户通过哈希结构的 URL 看到不同的内容。

　　#1、#2、#3、……

　　但是，搜索引擎只抓取和忽略主题标签，因此它们无法索引内容。

　　为了解决这个问题，谷歌提出了“井号+感叹号”的结构：#!str，当谷歌发现像上面这样的一个URL时，它会自动爬取另一个URL：

　　只要你把 AJAX 内容放在这个 URL 上，Google 就会收录。但问题是，“英镑+感叹号”非常丑陋和繁琐。Twitter曾经采用这种结构，结果用户反反复复，只用了半年就废止了。

　　那么，有没有什么方法可以让搜索引擎在抓取 AJAX 内容的同时保持更直观的 URL？

　　采用历史 API

　　所谓History API，是指在不刷新页面的情况下，改变浏览器地址栏中显示的URL（准确的说是改变网页的当前状态）。它的作用是在浏览器的 History 对象中添加一条记录。

　　window.history.pushState(状态对象, 标题, url);

　　上面这行命令可以使新的 URL 出现在地址栏中。History对象的pushState方法接受三个参数，新的URL是第三个参数，前两个参数可以为null。

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

　　目前所有主流浏览器都支持这种方法：Chrome(26.0+)、Firefox(20.0+)、IE(10.0+)、Safari(0.0+) @5.1+)，歌剧(12.1+)。

　　使用History API替换hashtag结构，让每个hashtag变成一个正常路径的URL，这样搜索引擎就会爬取每一个网页。

　　/1, /2, /3, …

　　然后，定义一个处理 Ajax 部分并基于 URL 获取内容的 JavaScript 函数（假设是 jQuery）。

　　功能锚点点击（链接）{

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

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

　　$('#content').html(数据);

　　});

　　}

　　再次定义鼠标点击事件。

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

　　锚点点击（位置。路径名）；

　　});

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

　　最后，设置服务器端。

　　因为没有使用主题标签结构，所以每个 URL 都是不同的请求。因此，服务器需要为所有这些请求返回具有以下结构的网页，以防止 404 错误。

　　如果你仔细看上面的代码，你会发现有一个noscript标签，这就是秘密。

　　我们将搜索引擎应该为 收录 的所有内容放在 noscript 标记中。在这种情况下，用户仍然可以在不刷新页面的情况下进行 AJAX 操作，但是搜索引擎会收录每个页面的主要内容！