一、#的涵义

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

　　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内容。

原文转自：http://www.ruanyifeng.com/blog/2011/03/url_hash.html

URL中的#号的更多相关文章

  1. URL中“#” “？” &“”号的作用

    URL中"#" "?" &""号的作用   阅读目录 1. # 2. ? 3. & 回到顶部 1. # 10年9月,twit ...

  2. URL中#(井号)的作用(转)

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

  3. angularjs中URL中的#号问题,$locationProvider.html5Mode(true)刷新404

    解决办法原文地址:https://blog.csdn.net/weixin_36185028/article/details/72179568 angularjs支持两种url模式,hash模式和ht ...

  4. 在ionic这个框架下(Angular JS)，对URL进行重写，过滤掉URL中的#号

    此时URL的改变已经完全不受后台代码控制了,因此我们要在前端的ionic这个框架和IIS中进行修改调控. 其实IIS只是host了整个站点,具体的URL跳转都是由前端来控制的. 1):那么前端要加上一 ...

  5. URL中含有+号，出现错误“请求筛选模块被配置为拒绝包含双重转义序列的请求”的解决方法

    搜索关键词中含空格,提交后被自动转成了“+”号,报如下错误: HTTP 错误 404.11 - Not Found 请求筛选模块被配置为拒绝包含双重转义序列的请求. 解决方法: 在web.config ...

  6. url中出现井号（"#"）的问题

    今天在asp.net mvc网站项目的前台页面里写一段js代码时,想要跳转到某个url,例如 location.href="xxxx?"+"id="+id+&q ...

  7. 工作随笔——ember框架去除url上的#号

    因为工作原因,接触到了一套非常好的前端框架--ember. ember框架高度封装,学习曲线比较陡峭. ember对于url更新的配置在config/environment.js >> l ...

  8. URL中字符的含义

    目录 URL中的特殊字符 #号的作用 URL中的特殊字符 我们经常会看到URL中有一些特殊的字符,比如 #,?,& ,/ ,+ 等.那么,它们的含义是什么呢? 特殊含义 十六进制 + 表示空格 ...

  9. url中#号的作用

    url中#号的作用就是本页面位置跳转 比如这个url地址:http://www.aaaaa.com/index.html?ad=34&m=c#red red就是index.html页面的依哥位 ...

随机推荐

  1. 树链剖分【CF343D】Water Tree

    Description Mad scientist Mike has constructed a rooted tree, which consists of nnvertices. Each ver ...

  2. 洛谷——P1407 工资

    P1407 工资 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工资完全相同! 公布了这项调查结果后,众多老板对于这一现象很感兴趣,他们 ...

  3. Codeforces Round #394 (Div. 2) C. Dasha and Password（简单DP）

    C. Dasha and Password time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  4. ASP.NET Core 2.2 基础知识(十一) ASP.NET Core 模块

    ASP.NET Core 应用与进程内的 HTTP 服务器实现一起运行.该服务器实现侦听 HTTP 请求,并在一系列请求功能被写到 HttpContext 时,将这些请求展现到应用中. ASP.NET ...

  5. SQL Loader with utf8

    alter this line in your control file characterset UTF8 to this characterset UTF8 length semantics ch ...

  6. （转） 网络GET、POST方法

    在iOS中,常见的发送HTTP请求(GET和POST)的解决方案有 苹果原生(自带) NSURLConnection:用法简单,最古老最直接的一种方案 NSURLSession:iOS7新出的技术,功 ...

  7. jmeter 线程组之间的参数传递

    http://www.cnblogs.com/wnfindbug/p/5817277.html 场景测试中,一次登录后做多个接口的操作,然后登录后的uid需要关联传递给其他接口发送请求的时候使用. 1 ...

  8. [xsy1515]小学生数学题

    题意:求$\begin{align*}\left(\sum\limits_{i=1}^n\dfrac 1i\right)\%\ p^k\end{align*}$ 数学真是太可爱了== 直接推公式 设$ ...

  9. 打算安装个Ubuntu双系统，遇到了些基本概念问题（主分区、活动分区、扩展分区、逻辑分区）

    和运维的同事聊天,了解到: 1.XP系统时代(老的硬盘分区形式和分区表),最多允许建4个“主分区”,为了解决这个限制,就有了“扩展分区”的概念: 2.在“扩展分区”上,我们就可以建很多的“逻辑分区”, ...

  10. Linux之ps查找进程用kill终止命令

    http://www.cnblogs.com/peida/archive/2012/12/20/2825837.html http://blog.csdn.net/andy572633/article ...