关于 URL 中的哈希符号 (#) 的 6 个知识

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 中定义的一个新的事件，当 # 值变化时将被触发。大多数的浏览器都支持这一事件，例如下面的代码，

1. window.onhashchange = func
3. window.addEventListener(“hashchange”, func, false);

参考：https://programmerlib.com/the-hash-key-in-the-url/