`

URL的井号

 
阅读更多

作者: 阮一峰

日期: 2011年3月 9日

去年9月,twitter改版。

一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为

  http://twitter.com/username

改版后,就变成了

  http://twitter.com/#!/username

在我印象中,这是主流网站第一次将"#"大规模用于直接与用户交互的关键URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。

一、#的涵义

#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,

  http://www.example.com/index.html#print

就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。

为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<div id="print" >。

二、HTTP请求不包括#

#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。

比如,访问下面的网址,

  http://www.example.com/index.html#print

浏览器实际发出的请求是这样的:

  GET /index.html HTTP/1.1

  Host: www.example.com

可以看到,只是请求index.html,根本没有"#print"的部分。

三、#后的字符

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

比如,下面URL的原意是指定一个颜色值:

  http://www.example.com/?color=#fff

但是,浏览器实际发出的请求是:

  GET /?color= HTTP/1.1

  Host: www.example.com

可以看到,"#fff"被省略了。只有将#转码为%23,浏览器才会将其作为实义字符处理。也就是说,上面的网址应该被写成:

  http://example.com/?color=%23fff

四、改变#不触发网页重载

单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。

比如,从

  http://www.example.com/index.html#location1

改成

  http://www.example.com/index.html#location2

浏览器不会重新向服务器请求index.html。

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

每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。

这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。

值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。

六、window.location.hash读取#值

window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

七、onhashchange事件

这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种:

  window.onhashchange = func;

  <body onhashchange="func();">

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

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

八、Google抓取#的机制

默认情况下,Google的网络蜘蛛忽视URL的#部分。

但是,Google还规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用"#!",Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

比如,Google发现新版twitter的URL如下:

  http://twitter.com/#!/username

就会自动抓取另一个URL:

  http://twitter.com/?_escaped_fragment_=/username

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

(完)

分享到:
评论

相关推荐

    php获取URL中带#号等特殊符号参数的解决方法

    然而,URL参数中可能包含特殊字符,如井号(#)和其它符号,它们在URL中扮演特定的角色,可能导致无法直接获取预期的参数值。本篇知识点将详细探讨如何在PHP中获取带有特殊符号,如井号(#)的URL参数,并介绍如何使用...

    struts2 井号,星号,百分号的含义和使用举例.doc

    在Struts2中,井号(#)、星号(*)和百分号(%)在OGNL表达式中扮演着不同的角色。 首先,井号(#)主要与OGNL上下文和Action上下文关联。在Struts2中,#被用来访问OGNL上下文中的对象,这包括ActionContext,它...

    URL重写URL重写URL重写

    **URL重写技术详解** URL重写是Web开发中一种重要的技术,主要用于优化网站的URL结构,使其更符合用户友好性和搜索引擎优化(SEO)的要求。简单来说,URL重写就是将用户请求的实际复杂URL转换为更加简洁、易读的...

    js获取url,javascript获取url参数等

    设置或获取对象指定的文件名或路径。 ...设置或获取 href 属性中在井号“#”后面的分段。 设置或获取 location 或 URL 的 hostname 和 port 号码。 设置或获取 href 属性中跟在问号后面的部分。

    所有Url转移字符表

    - `%23`:井号 (`#`),用于标识页面内的锚点。 - `%24`:美元符号 (`$`)。 - `%25`:百分号 (`%`),本身用于转义,所以需要转义为`%25`。 - `%26`:与号 (`&`),用于分隔URL中的参数。 - `%27`:单引号 (`'`)。...

    URL 的具体分析

    6. **片段标识符**:以井号(#)分隔,用于页面内部定位。 在标签中,"源码"可能意味着文章会讨论URL类在Java中的实现,如`java.net.URL`类。Java中,我们可以使用`URL`类来创建、解析和操作URL对象。例如,通过`...

    URL.rar_url_url解析

    6. **片段标识符**:以井号(#)分隔,用于在页面内部定位特定内容,如`#section1`。 **URL解析**是将一个完整的URL分解成这些组成部分的过程,这在很多场景下都是必要的,比如路由、数据请求和页面跳转。在...

    URL 编码文档

    不安全字符主要包括空格、引号("和')、尖括号(&lt;和&gt;)、井号(#)、百分号(%)、花括号({})、竖线(|)、反斜杠(\)、波浪线(^)、方括号([])、反引号(`)和波浪线(~)。空格通常会被转换为加号(+)或者...

    java URL的组成部分

    6. **片段标识符(Fragment Identifier)**:URL的最后部分可以是一个井号“#”,后面跟着片段标识符,它指示页面内的特定位置,但不会发送到服务器。例如,“#section1”会将浏览器滚动到页面的“section1”部分。 ...

    URL编码表一览

    `)、双引号(`"`)、井号(`#`)、美元符号(`$`)、百分号(`%`)、与号(`&`)、单引号(`'`)、左括号(`(`)、右括号(`)`)、星号(`*`)、加号(`+`)、逗号(`,`)、减号(`-`)、点号(`.`)、斜杠(`/`)。 - `%30`到`%39`代表数字`0`到...

    url正则表达式

    - `片段标识符`(用于页面内部定位,用井号#标识,如#section1) 2. **URL正则表达式构建** 创建一个全面的URL正则表达式可能非常复杂,因为它需要考虑各种可选部分和特殊字符。以下是一个简化的示例: ``` ^...

    URL转码及不能被转码的特殊字符

    - “#”(井号)——用于分隔URL的主体与片段标识符。 - “=”(等号)——用于分隔查询字符串中的键值对。 - “&”(与号)——用于连接查询字符串中的多个参数。 这些字符在URL中具有特殊的语法意义,如果对其...

    url编码表,转换编码

    例如,空格(space)被编码为"%20",引号(")被编码为"%22",井号(#)被编码为"%23"。这个编码表包含了从ASCII码表中的每一个字符,包括控制字符(如backspace、tab、linefeed等)到常见的符号和特殊字符,一直到...

    url特殊字符

    在处理URL时,我们经常需要对特殊字符进行编码,比如空格、引号、尖括号、百分号、井字号等。这是因为这些字符在URL中有特定的用途,或者在网络传输中可能引起问题。例如,空格如果不编码,许多系统会将其解释为分隔...

    URL 编码转换工具

    例如,空格通常被转换为`%20`,而引号(`"`)、井字号(`#`)和与号(`&`)等字符也需要进行适当的编码。 "URL 编码转换工具"是一个专门用于处理URL编码和解码的应用软件,它能够帮助用户将字符串中的特殊字符转换为它们...

    PHP 正则获取字符串的URL

    #]+` 匹配任何不是空格、斜线、问号、点号或井字号的字符,这部分代表域名和路径。 - `[^\s]*` 匹配任何不是空格的字符,这部分可以是路径的剩余部分、查询参数或片段标识符。 为了从字符串中提取符合此模式的URL,...

    VUE : vue-cli中去掉路由中的井号#操作

    - **刷新问题**:当使用History模式时,用户直接访问一个没有被浏览器加载过的URL(比如通过书签或直接输入URL),浏览器会尝试从服务器获取该路径对应的资源。如果服务器没有正确配置,将会返回404错误。所以,...

    URL分析示例程序

    6. **片段标识符**:以井号(#)分隔,用于页面内的定位,但不会被发送到服务器。 在"URL分析示例"程序中,可能包含以下功能: 1. **URL合法性检查**:验证输入的字符串是否符合URL的格式,包括检查协议、主机名、...

    浏览器中的URl

    5. **片段标识符**:以井号“#”分隔的部分,如“#section1”,不发送到服务器,而是用于浏览器内部,指示页面上的特定位置,常见于锚点链接。 **历史记录**:浏览器会记录用户的浏览历史,方便用户回溯和查找之前...

Global site tag (gtag.js) - Google Analytics