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. POJ - 3268 单源最短路

    题意:给定一些有向边,以及一个目的地,从某个点到达目的地,再从目的地回到那个点.共有n个点,问这n个点花费最大是多少? 思路:从目的地回去直接把目的地作为源点即可.那么从某个点到达目的地应该如何得到最 ...

  2. [Note] 计算机网络的应用层

    应用层 原理 结构和模型 客户-服务器体系结构(client-server architecture ) 通信不是直接的,需要通过服务器转发 经常会在服务器积压大量的负载 服务器(server) 服务 ...

  3. TCP/IP三次握手四次挥手

    本文通过图来梳理TCP-IP协议相关知识.TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道.如图所示,给出了TCP通信过程的示意图. TCP 三次握手四次挥手 主要包括三部 ...

  4. python爬虫框架scrapy问题的解决

    2016-09-24:今天的弄了一天的scrapy的环境的配置的,linux很多的学过的事情都忘记啦.理论和实践的结合还是非常的重要的,不光要学会思考,更要学会总结纪录.还要多多回忆的和复习.学习了不 ...

  5. 多项式A除以B

    这个问题我是在PAT大区赛题里遇见的.题目如下: 多项式A除以B(25 分) 这仍然是一道关于A/B的题,只不过A和B都换成了多项式.你需要计算两个多项式相除的商Q和余R,其中R的阶数必须小于B的阶数 ...

  6. SSE推送数据

    SSE(Server-Sent Event,服务端推送事件)是一种允许服务端向客户端推送新数据的HTML5技术.与由客户端每隔几秒从服务端轮询拉取新数据相比,这是一种更优的解决方案. WebSocke ...

  7. iOS.Animations.by.Tutorials.v2.0汉化（二）

    翻译自:iOS.Animations.by.Tutorials.v2.0 第一节(第1章) 动画属性 现在你已经看到了动画是多么的简单,你可能很想知道你的视图控件是怎么动起来的.本节将给你一个UIVi ...

  8. for、for in和while以及do while

    for循环:一般用在已知判断条件的循环; for(变量初始化;循环条件判断;循环后的执行){ 代码块 } //变量初始化可以省略,但是分号不能省.有多个的话用逗号隔开 //循环条件判断是true还是f ...

  9. 0_OpenCV3.4.0+Visual Studio2017 + win10环境配置

    研究生学习方向是计算机视觉,因此想从传统的算法开始,于是尝试安装Opencv做一些项目.在安装过程中碰到很多问题,搭建成功后立刻记录下来,一遍以后查看. 安装环境:windows10 64bit 专业 ...

  10. Extjs 4.0 Tab页

    1.JSON代码 Ext.MyTabs=Ext.extend(Ext.TabPanel ,{ xtype:"tabpanel", activeTab:2, width:694, h ...