原文地址: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的<a>标签,
<h3><a name="print"></a>Printing Support</h3>
找到后滚动页面到该位置进行展示,如下图所示
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