一个显著变化,就是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内容。
文章内容引自:http://www.ruanyifeng.com/blog/2011/03/url_hash.html
分享到:
相关推荐
主要介绍了php获取URL中带#号等特殊符号参数的解决方法,本文使用JS中的escape函数编码后传递解决这个问题,需要的朋友可以参考下
AngularJS去掉的URL里的#号,使用AngularJS的朋友都应该了解,AngularJS框架定义了自己的前端路由控制器,通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新,并支持HTML5的历史记录功能,详细介绍可以参考文章...
web开发中,有时候给超链接写点击事件时候喜欢这样写: 操作</a> 有次用jquery提交ajax请求后,当前页的url参数末尾就会自动给加个#号。开始百思不得其解,纠结了半天原来是这种写法的问题,换成 href=”[removed]...
Angular2+如何去除url中的#号详解.docx
最近天天都在用AngularJS,各类文档也都看过好...今天终于把AngularJS的项目访问路径URL里的#号去掉了,这个问题不见得有多难,关键是花多长时间去理解AngularJS框架本身,下面来看看详细介绍,需要的朋友可以参考下。
+ URL 中+号表示空格 + 2. 空格 URL中的空格可以用+号或者编码 3. / 分隔目录和子目录 / 4. ? 分隔实际的 URL 和参数 ? 5. % 指定特殊字符 % 6. # 表示书签 # 7. & URL 中指定的参数间的分隔符 & 8. = URL 中指定...
URL重写URL重写URL重写URL重写URL重写URL重写
Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解).doc
url出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,...+ URL 中+号表示空格 + 空格 URL中的空格可以用+号或者编码 / 分隔目录和子目录 / ? 分隔实际的URL和参数
本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中遇到的一个问题,觉着有必要给大家分享下,下面话不多说了,来一起看看详细的介绍吧。 1. 为什么要去除? Angular官方指出:如果没有足够...
设置或获取对象指定的文件名或路径。 ...设置或获取 href 属性中在井号“#”后面的分段。 设置或获取 location 或 URL 的 hostname 和 port 号码。 设置或获取 href 属性中跟在问号后面的部分。
一个显著变化,就是URL加入了”#!”符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username 这是主流网站第一次将”#”大规模用于重要URL中。这表明井号...
下面的内容介绍了#号的使用,因为在url中多个#号代表不同的意义与区别。
有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。编码的格式为:%加字符的ASCII码,即一个百分号%,
signurl 命令用于获取某个对象的预签名 URL,可以通过此 URL 匿名访问对象。- 关于此命令的其他通用选项(例如切换存储桶、切换用户账号等),请参见
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。这篇文章主要介绍了Vue Router去掉url中默认的锚点#,需要的朋友可以参考下
Java正则表达式[web输入验证<身份证,邮箱,URL,手机号等>]