关于片段URL你应该知道的6个要点

原文地址：http://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/

1、片段URL表示网页的一个位置

任一带#的URL称为片段URL（ps：通常称为URL hash，下文统一称为URL hash）。#左边部分是浏览器可以下载的资源，#右边部分称为片段标识符，表示资源内的某一位置。

举个栗子：

在HTML文档里，浏览器会寻找name属性为print的标签，

Printing Support

找到后滚动页面到该位置进行展示，如下图所示

2、hash不会随HTTP请求发送

如果你通过HTTP嗅探器请求带hash的URL，在请求URL或引用头部将找不到hash名称。原因是hash名称只被浏览器识别，它不影响从服务器返回的任何资源。

下面是通过HttpWatch请求带hash的URL的快照

所以不要指望在服务器端可以看到hash标识符。

3、跟在第一个#后的是hash标识符

即使第一个#被主机名、路径或查询字符串包含，它也总是表示hash标识符的起点。

又一个栗子：

http://example.com/?color=#ffff&shape=circle

这个URL本意是带2个参数：color（值为#ffff）和shape（值为circle）。不幸的是，查询字符串包含了#，#后面的部分都被浏览器解析成了hash标识符，服务器看到这个请求携带了color参数，但参数值是空，什么鬼！！

4、修改hash值不会重新加载页面但会增加一条浏览器历史记录

URL hash有一些有趣的特征。

例如你修改一个URL的hash值，

http://www.httpwatch.com/features.htm#filter->http://www.httpwatch.com/features.htm#print

浏览器将从filter所在位置滚动到print所在位置，这个过程中浏览器并没有重新加载页面。

但是这个修改动作新增了一条浏览器历史记录，所以当你点击浏览器返回按钮时，页面会回到filter所在位置。

这个特征在通过Javascirpt处理单页面跳转很有用，不管是通过顶层HTML frames还是用Ajax动态更新页面都试用。

5、JavaScript可通过window.location.hash修改URL hash

JavaScript可以修改window.location的hash属性，这样做不用重新加载页面，同时新增了一条浏览历史记录。

笔者最近使用基于frame的HTML页面在网站上部署了HttpWatch的帮助和自动化引用。有一个问题：用户在不同的主题浏览时，地址栏的URL并无改变，因此无法分享感兴趣的主题内容。

解决方案是使用URL hash创建可导航的URL地址。不同的hash标识不同的主题内容。

6、谷歌爬虫默认忽略hash标识

谷歌爬虫负责抓取网页内容和内嵌的链接以组成谷歌搜索索引。爬虫获取和解析HTML，但它并不是一个完整的浏览器，没有JavaScript引擎。因此，爬虫仅关注服务器返回的资源，忽略hash标识符，网页上用于加载和构建网页内容的JavaScript代码不会被执行。

这意味着通过Ajax加载网页的网址将不会被索引，它们的hash标识符无法被谷歌搜索直接返回。为解决这个问题，谷歌支持一个允许爬虫将hash标识符转为url查询参数的方案。

要想使用这个方案，需要在hash标识符前置一个“!”：

http://www.example.com/ajax.html#mystate->http://www.example.com/ajax.html#!mystate

前置!的存在表示你遵循谷歌的方案。

这种情况下，个人网页需要识别_escaped_fragment_参数，以达到hash加载的同样效果。当爬虫需要给定状态的网页内容时，爬虫提供hash标识符，通过GET请求获得。

http://www.example.com/ajax.html?_escaped_fragment_=mystate