URL中#符号的作用
转自http://blog.sina.com.cn/s/blog_6f9eb2dd0100sk97.html
一、#的涵义
#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,
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"被省略了。只有将#转码为#,浏览器才会将其作为实义字符处理。也就是说,上面的网址应该被写成:
http://example.com/?color=#fff
四、改变#不触发网页重载
单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
比如,从
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的变化。
URL中#符号的作用的更多相关文章
- url中#号的作用
url中#号的作用就是本页面位置跳转 比如这个url地址:http://www.aaaaa.com/index.html?ad=34&m=c#red red就是index.html页面的依哥位 ...
- jquery 中$符号六大作用
jquery 中$符号六大作用 2012-12-16 86市场网 javascript a.$用作选择器, var e = $("h1 a"); var f = $("t ...
- jQuery中$符号的作用
jQuery中$符号的作用 1.查找作为jQuery包装器,利用选择器来选择DOM元素(这个也是最强大的功能) 例如:$("table tr:nth-child(even)") 基 ...
- # ? & 号在url中的的作用
1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...
- url中?的作用
http://123.206.87.240:8002/get/?what=flag? 分隔实际的URL和参数 ,用于动态页面的交互和传参
- url中的特殊符号含义
1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...
- url 中 # ? & 的作用
1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...
- URL中“#” “?” &“”号的作用
URL中"#" "?" &""号的作用 阅读目录 1. # 2. ? 3. & 回到顶部 1. # 10年9月,twit ...
- URL中#(井号)的作用(转)
2010年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/username 改版后,就变 ...
随机推荐
- leetcode 889. Spiral Matrix III
On a 2 dimensional grid with R rows and C columns, we start at (r0, c0) facing east. Here, the north ...
- 20145229吴姗珊《java程序设计》第2次实验报告
20145229吴姗珊<java程序设计>第2次实验报告 实验名称 Java面向程序设计,采用TDD的方式设计有关实现复数类Complex. 理解并掌握面向对象三要素:封装.继承.多态. ...
- Docker 数据管理-三种数据mount方式
可以在Container可写层存储数据,但是有三个缺点: 当Container销毁时,数据不能持久保存. Container的可写层和Container所在的主机紧耦合,不容易将数据移动到其他地方. ...
- Spring与web.xml
出处:http://blog.csdn.net/u010796790 在web.xml配置监听器 ContextLoaderListener (listener-class) ContextLoade ...
- LINQ 学习路程 -- 查询操作 OrderBy & OrderByDescending
Sorting Operator Description OrderBy 通过给定的字段进行升序 降序 排序 OrderByDescending 通过给定字段进行降序排序,仅在方法查询中使用 Then ...
- c++大作业五子棋-需求分析与设计方案
写在前边: 本来上学期就已经完成这个大作业,临近考试太忙. 而且老师最后要查重,就没有把代码放上来. 如需整个工程,移步http://download.csdn.net/detail/sdzuiaid ...
- AIM Tech Round 3 (Div. 2) A , B , C
A. Juicer time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...
- tomcat警告:Setting property 'source' to 'org.eclipse.jst.j2ee.server:ServletPro' did not find a matching property
警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclips ...
- Python基础-操作mysql
mysql 属于第三方模块,需要先安装 pip install pymysql,sql执行后,数据获取函数有三种cur.fetchone()#获取第一条数据,依次类推下去,第二次执行时候,就会取除去第 ...
- 输入框input内容变化与onpropertychange事件的兼容
一.输入框常用的几个事件 onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句 ...