2010年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

三、#后的字符
在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
比如，下面URL的原意是指定一个颜色值：http://www.example.com/?color=#fff，但是，浏览器实际发出的请求是：

GET /?color= HTTP/1.1

Host: www.example.com

四、改变#不触发网页重载
单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。
比如，从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内容。

URL中“#”的更多相关文章

  1. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  2. 记录一次bug解决过程：velocity中获取url中的参数

    一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...

  3. JavaScript如何获取网页url中的参数

    我们可以自定义一个公共函数来实现网页url中的参数获取,返回的是一个数组 GetUrlRequest: function () { var url = decodeURI(location.searc ...

  4. js获取页面url中的各项值

    一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...

  5. url中的特殊符号含义

    1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...

  6. ThinkPHP 隐藏URL中的 index.php

    去掉 URL 中的 index.php 通常的URL里面含有index.php,为了达到更好的SEO效果可能需要去掉URL里面的index.php ,通过URL重写的方式可以达到这种效果,通常需要服务 ...

  7. 使用JS，获取URL中指定参数的值

    /** * 获取URL中指定参数的值 * * @param name 参数名称 * @returns */ function getQueryString(name) { var reg = new ...

  8. js获取URL中的参数

    js获取URL中的一些参数的意思 location对象 含有当前URL的信息. 属性 href 整个URL字符串. protocol 含有URL第一部分的字符串,如http: host 包含有URL中 ...

  9. APPCAN开发笔记：html页面之间的参数传递：使用js获取url中的参数，以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  10. url中的特殊字符问题

    在 使用url进行参数传递时,经常会传递一些中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312, 而在接收页面使用UTF8,这样接收到的参数就可能会 ...

随机推荐

  1. session垃圾回收机制

    主要有以下三个参数 session.gc_maxlifetime:session生命周期 session.gc-devisor:启动session回收机制频率的被除数(分母) session.gc_p ...

  2. WinXP系统下Opencms的安装与配置

    1.WinXP系统下安装opencms (1)mysql已安装5.1.40 cmd命令行:mysql   -uroot  -proot (2)OpenCMS在安装时要求MySQL系统变量“max_al ...

  3. CentOS7上LNMP安装包一步搭建LNMP环境

    系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要5GB以上硬盘剩余空间 需要128MB以上内存(如果为128MB的小内存VPS,Xe ...

  4. 《android开发艺术探索》读书笔记（一）--Activity的生命周期和启动模式

    No1: 如果新Activity采用了透明主题,那么当前Activity不会回调onStop: No2: 新Activity启动之前,栈顶的Activity需要先onPause后,新Activity才 ...

  5. CodeForces-747A

    从sqrt(n)枚举到1,一旦满足一定是差最小的数. AC代码: #include<cstdio> #include<cmath> int main(){ int n; whi ...

  6. poj1011 && uva307 DFS + 剪枝

    将木棒从大到小排列,保证每次的选择都是最长可选的木棒. 剪枝: 1 . 如果第 i 根木棒被选择却无法成功拼接,那么后面与其长度相同的也不能选择. 2 . 如果第 cnt + 1 根木棒无法成功拼接, ...

  7. Nginx 调优经验记录

    1.2017年连续爆出5.x版本xshell安全问题和intel的cpu设计漏洞 ,此时我就注意到尽量少暴露自己线上使用的工具以及版本.例如:mysql版本,以及缓存层策略,服务器版本等,以下为 隐藏 ...

  8. JavaScript中基本数据类型和引用数据类型的区别

    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...

  9. C#访问修饰符(public,private,protected,internal,sealed,abstract)

    为了控件C#中的对象的访问权限,定义对象时可以在前面添加修饰符. 修饰符有五种:private(私有的),protected(受保护的),internal(程序集内部的),public(公开的),以及 ...

  10. Shell脚本编程学习入门 01

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...