1. URL 中哈希符号 (#
) 的含义
URL 中的哈希符号 (#
) 被用来作为网页中的 锚点 使用,锚点的含义就是页面中的某个特定的位置,这个位置可以被快速找到,很类似于在该位置抛了一个锚。
哈希符号 #
右侧的部分,是这个锚点的唯一标志,例如
http://www.example.com/index.html#section
代表了页面 index.html
中存在一个锚点 section
,浏览器会自动滚动页面到 section
所指定的位置
下面的例子是如何在 html 中创建一个锚点,首先创建一个超链接,指向该锚点
<a href="#section">锚点跳转</a>
在创建锚点所在的位置,只需要创建一个 div
块,使其 id
为 section
<div id="section"></div>
这样一来,在页面上点击 “锚点跳转” 时,页面将自动滚动到 id=”section”
的位置。同时,在 URL 后面会补充上 #section
。
2. http 请求中,#
及其右侧数据不会传递给服务器
URL 中的哈希符号 (#
) 用来指示浏览器的操作,对于服务端来说一点用处都没有。所以浏览器(以及我验证过的 http 客户端)发出的 http 请求中是不会携带任何 #
及其右侧数据的。
当访问如下网址时,
·
https://stackoverflow.com/?key=#abc
请求如下
可以看出只发送了 https://stackoverflow.com
,而不包含 #abc
信息
3. 向服务端传递 #
符号
#
右侧任何的字符都会被当做是锚点的标识符,这也意味着这些数据不会被发送到服务端。但是有的时候如果我们想在 url 中向服务器传递 #
值,这时候需要将 #
编码为 %23
,例如
https://stackoverflow.com/?key=%23abc
这样服务器将接收到 #abc
作为 key
的值。
4. #
右侧的内容变化不会触发页面重新加载
改变哈希符号 #
右侧的内容,浏览器只会滚动到目标位置,并不会触发页面重新加载,也就是说不会发出任何网络请求。
5. #
右侧的内容变化将改变浏览器的历史记录
每次改变哈希符号 #
右侧的内容,浏览器的访问历史就会增加一条记录。我们可以用 “回退” 键返回之前的位置。
这对于 SPA(single page application) 应用尤为重要。可以在同一个页面中,使用不同的 #
值来表示不同的页面状态。
但这对 IE6 和 IE7 并不适用,当改变哈希符号 #
右侧的内容时,浏览记录并不会增加
6. onhashchange
事件
onhashchange
是 HTML 5 中定义的一个新的事件,当 #
值变化时将被触发。大多数的浏览器都支持这一事件,例如下面的代码,
window.onhashchange = func
<body onhashchange=”func();”>
window.addEventListener(“hashchange”, func, false);