关于 URL 中的哈希符号 (#)

最新推荐文章于 2024-07-11 09:49:02 发布
最新推荐文章于 2024-07-11 09:49:02 发布
阅读量377 收藏
点赞数
文章标签： 哈希算法 算法
原文链接：https://programmerlib.com/the-hash-key-in-the-url/
版权

1. URL 中哈希符号 (#) 的含义

URL 中的哈希符号 (#) 被用来作为网页中的 锚点 使用，锚点的含义就是页面中的某个特定的位置，这个位置可以被快速找到，很类似于在该位置抛了一个锚。

哈希符号 # 右侧的部分，是这个锚点的唯一标志，例如

http://www.example.com/index.html#section
  • 1

代表了页面 index.html 中存在一个锚点 section，浏览器会自动滚动页面到 section 所指定的位置

下面的例子是如何在 html 中创建一个锚点，首先创建一个超链接，指向该锚点

<a href="#section">锚点跳转</a>
  • 1

在创建锚点所在的位置，只需要创建一个 div 块，使其 id 为 section

<div id="section"></div>
  • 1

这样一来，在页面上点击 “锚点跳转” 时，页面将自动滚动到 id=”section” 的位置。同时，在 URL 后面会补充上 #section。

2. http 请求中，# 及其右侧数据不会传递给服务器

URL 中的哈希符号 (#) 用来指示浏览器的操作，对于服务端来说一点用处都没有。所以浏览器（以及我验证过的 http 客户端）发出的 http 请求中是不会携带任何 # 及其右侧数据的。

当访问如下网址时，
·

https://stackoverflow.com/?key=#abc
  • 1

请求如下

可以看出只发送了 https://stackoverflow.com，而不包含 #abc 信息

3. 向服务端传递 # 符号

# 右侧任何的字符都会被当做是锚点的标识符，这也意味着这些数据不会被发送到服务端。但是有的时候如果我们想在 url 中向服务器传递 # 值，这时候需要将 # 编码为 %23，例如

https://stackoverflow.com/?key=%23abc
  • 1

这样服务器将接收到 #abc 作为 key 的值。

4. # 右侧的内容变化不会触发页面重新加载

改变哈希符号 # 右侧的内容，浏览器只会滚动到目标位置，并不会触发页面重新加载，也就是说不会发出任何网络请求。

5. # 右侧的内容变化将改变浏览器的历史记录

每次改变哈希符号 # 右侧的内容，浏览器的访问历史就会增加一条记录。我们可以用 “回退” 键返回之前的位置。

这对于 SPA（single page application） 应用尤为重要。可以在同一个页面中，使用不同的 # 值来表示不同的页面状态。

但这对 IE6 和 IE7 并不适用，当改变哈希符号 # 右侧的内容时，浏览记录并不会增加

6. onhashchange 事件

onhashchange 是 HTML 5 中定义的一个新的事件，当 # 值变化时将被触发。大多数的浏览器都支持这一事件，例如下面的代码，

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

参考：The hash key(#) in the URL - Programmer Lib

拿破轮
关注
URL地址中的#符号使用说明
09-05
下面的内容介绍了#号的使用，因为在url中多个#号代表不同的意义与区别。
UrlHash/锚点
11-02
使用《UrlHash/锚点》解决移动设备中的单页面应用的物理[返回键]带来的困扰 示例代码
玩转Nginx篇二【IP哈希和URL哈希】
qq_42168462的博客
10-12 3599
IP Hash和URL Hash配置和原理以及适用场景
URL中出现 # 符号
最新发布
u010194271的博客
07-11 604
在单页应用（SPA）中，包括使用Flutter Web开发的应用程序，URL中出现 # 符号通常表示应用程序正在使用基于哈希（Hash-based）的路由管理。这种路由管理方式称为哈希路由（Hash Routing）。
URL中的hash（#号）
sleepwalker_1992的专栏
07-23 2108
1.#的含义 #代表网页中的一个位置，其右边的字符，就是该位置的标识符。比如 http://www.example.com/index.html#print 就是代表index.html中的print位置。浏览器会自动把print位置滚动到页面可视区域内。 设置方法： step1：设置一个锚点&lt;a href="#print"&gt;定位到print位置&lt;/a&gt; st...
URL的#号
思想实践地
03-10 2930
<br /> <br />【转贴】<br /> 作者：阮一峰<br /> 原文名称：URL的井号<br /> 原文网址：http://www.ruanyifeng.com/blog/2011/03/url_hash.html<br /> <br /> <br />去年9月，twitter改版。<br />一个显著变化，就是URL加入了"#!"符号。比如，改版前的用户主页网址为<br />　　http://twitter.com/username<br />改版后，就变成了<br />　　http://twi
URL中“#”号的作用
weixin_33742618的博客
04-07 1017
去年9月，twitter改版。 　　一个显著变化，就是URL加入了"#!"符号。比如，改版前的用户主页网址为 http://twitter.com/username 　　改版后，就变成了 http://twitter.com/#!/username 　　这是主流网站第一次将"#"大规模用于重要URL中。这表明井号（Hash）的作用正在被重新认识。本文根据HttpWatch...
URL地址中的#符号
weixin_33834910的博客
02-12 250
一般我们想让一个a标签点击后执行javascript代码，有以下几种写法：方式一：<a href="#" onclick="alert(1);">点击一</a>这种方式的缺点就是点击后会在地址栏的URL后面加#号，同时把页面移动到顶部，如下图所示： 方式二：<a href="javascript:void(0);" onclick="alert(1);">...
使用IIS服务器从AngularJS URL中删除“＃”符号
04-07
完成上述步骤后，你应该能够在不带哈希符号的AngularJS URL中正常导航，例如`http://example.com/home`。请注意，启用HTML5模式后，首次加载应用时需要通过服务器返回正确的HTML文档，因为此时浏览器不会向服务器...
URL中“#” “？” &“”号的作用浅析
08-31
URL中的“#”，“？”和“&”号在构建和解析网页地址时起着至关重要的作用。这些符号分别用于不同的目的，帮助浏览器和服务器更好地理解并处理请求。 1. **#（井号）**： - **含义**：井号（#）用于标识网页内的...
AngularJS路由删除#符号解决的办法
10-19
但是，哈希符号的存在使得URL看起来不够简洁美观，这在现代Web应用中往往不是最佳实践。 为了解决这个问题，开发者们可以采用HTML5的history模式。在这个模式下，AngularJS的路由不再依赖于URL中的哈希部分，而是...
AngularJS删除路由中的#符号的方法
10-21
为了消除URL中的哈希符号，AngularJS提供了html5Mode的功能。通过启用html5Mode，AngularJS可以利用HTML5的history API来处理路由，从而使得URL看起来更加的简洁和友好。 具体实现步骤如下： 1. 启用html5Mode 要...
url #
tempsitegoogle
03-20 127
{ text : bundle .getMsg('zjDailydrillrep.listGrid.toolbar.addbutton'), cls : 'x-btn-text-icon', icon : '../../resources/tree/images/iconNewNewsEntry.gif', disabled : !COMMWELL_TOOLBAR_NEW_BU...
URL中的#?&符号的作用
老头学编程的博客
12-14 694
# 10年9月，twitter改版。一个显著变化，就是URL加入了"#!“符号。比如，改版前的用户主页网址为http://twitter.com/username改版后，就变成了http://twitter.com/#!/username。这是主流网站第一次将”#"大规模用于重要URL中。 1.#代表网页中的一个位置 其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会
获取url的hash值
weixin_34133829的博客
03-04 1140
location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。 而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。 ...
URL中的#
weixin_34015336的博客
11-07 348
1. 包含#的url是什么？ 包含#符号的url就是一个 Fragment URL。#指定了网页中的一个位置。 浏览器就会查询网页中name属性值匹配print的<a>标签。即：<a name="print"></a> ， 或者是 id 属性匹配 print 的 <a> 标签。即<a id="print"></a> 匹配后，...
URL地址中的#
allanshi1986008的博客
07-25 1189
1、#的涵义 代表网页中的一个位置。井号后面的字符，就是该位置的标识符。比如， http://www.baidu.com/index.html#one 就代表网页index.html的one位置。浏览器读取这个URL后，会自动滚动one的位置。 怎么为网页位置指定标识符，有两种方法。一是使用锚点，比如, 或者使用id属性，比如 2、HTTP请求不包括# 是用来指导浏览器动作的，对服务器端...
符号表/哈希表
weixin_30526593的博客
12-30 208
符号(hash)表是以集合为基础，支持一下几种运算： 1、判断某个元素是否在集合中； 2、元素的插入； 3、元素的删除； 主要写一下哈希表其核心思想，通过一个类似数组的表，表的编号代表着所要存储以及使用的数据的某种具有分别性（可以快速寻找到）的特征，表中存储的是该数据；在实现上述三个运算过程中需要处理的主要有两点： 1、如何快速寻找定位某个元素，即设计一个哈希函数，寻找其key值； 2、如何处理无...
vue 哈希值 url
鬼鬼的博客
09-18 341
六部分组成: 协议 域名 端口 路径 参数 哈希值 哈希值变化的时候 页面不会跳转 a里面的#省略的是url url的hash值 专门用于实现前端路由 ,不同的hash值对应不同的页面 ,当hash发生变化的时候, 当前页面中的内容也会发生变化 ,而且这种变化是无跳转的 hash用于前端页面控制 所以向服务器发送请求的时候 url的hash 是不会发送的 ...
react怎么实现二级路由，需要哈希路由，路由懒加载
04-28
在 React 中实现二级路由需要使用 React Router 库，并且需要使用哈希路由。哈希路由使用 URL 中的 # 符号来实现路由跳转，这样可以避免刷新页面时的数据丢失。以下是实现二级路由的步骤： 1. 安装 React Router 库：在终端中使用 npm install react-router-dom 命令安装 React Router 库。 2. 引入 React Router 库：在需要使用路由的组件中引入 React Router 库。 3. 创建路由组件：在路由组件中使用 Route 组件设置二级路由的路径和对应的组件。 4. 设置路由跳转：在需要跳转到二级路由的组件中，使用 Link 组件设置跳转路径。 5. 使用路由懒加载：在设置路由组件时，使用 React.lazy 和 Suspense 组件实现路由懒加载，可以提高页面加载速度。 以下是示例代码： ```javascript import React, { lazy, Suspense } from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; const Home = lazy(() => import("./Home")); const About = lazy(() => import("./About")); function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Suspense fallback={<div>Loading...</div>}> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </Suspense> </div> </Router> ); } export default App; ``` 在上面的代码中，Home 和 About 组件是二级路由的组件，使用 Route 组件设置了二级路由的路径和对应的组件。在需要跳转到二级路由的组件中，使用 Link 组件设置跳转路径。使用 React.lazy 和 Suspense 组件实现了路由懒加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值