URL中#(井号)的作用_luka2008的博客-CSDN博客
URL中#(井号)的作用
luka2008
于 2014-08-22 11:30:47 发布
8368
收藏
分类专栏：
html
文章标签：
html
html
专栏收录该内容
1 篇文章
0 订阅
订阅专栏
2010年9月，twitter改版。
一个显著变化，就是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 οnhashchange="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
luka2008
关注
关注
点赞
收藏
评论
URL中#(井号)的作用
去年9月，twitter改版。一个显著变化，就是URL加入了"#!"符号。比如，改版前的用户主页网址为 http://twitter.com/username改版后，就变成了 http://twitter.com/#!/username在我印象中，这是主流网站第一次将"#"大规模用于直接与用户交互的关键URL中。这表明井号（Hash）的作
复制链接
扫一扫
专栏目录
利用location.hash实现跨域iframe自适应
10-29
其他一些类似js跨域操作问题也可以按这个思路去解决，需要的朋友可以测试下。
window.location.hash解析
04-17
NULL
博文链接：https://hugang357.iteye.com/blog/1833003
参与评论
您还未登录，请先
登录
后发表或查看评论
html5 css选择器 井号, 句点的区别
weixin_30242907的博客
06-27
130
一、理解CSS的样式组成CSS里的样式表是有规则组成的，每条规则有三个部分组成：1、选择器（如下面例子中的：“body”），告诉浏览器文档的哪个部分受规则影响；2、属性（如实例中的font-family、color等），规定了布局的什么方面被设置了；3、值（如实例中的Arial,sans-serif，#333333等），给出了式样属性的值。 二、CSS式样中不同符号的区别 #是ID选择器 .是c...
html 井号 作用,html5 css选择器。 井号，句号的区别
weixin_30821881的博客
06-10
388
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family.color等),规定了布局的什么方面被设置了:3.值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值. 二.CSS式样中不同符号的区别 #是ID选择器 .是cl...
window.location 详解
张驰Terry
02-05
1万+
window.location对象常用属性
location.hostname 返回 web 主机的域名
location.host 返回 web 主机的域名（包含端口）
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443，如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。）
location.protocol 返回所使用的 web 协议（http:// 或 http
URL的#号
思想实践地
03-10
2614
<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
location 获取参数和锚_JavaScript location.hash 属性：设置或取得当前 URL 中的锚
weixin_29380121的博客
12-24
253
JavaScript location.hash 属性Location 对象的 hash 属性用于设置或取得 URL 中的锚部分(包括 # 标记)，语法如下：location.hash = anchor_namelocation.hash 实例例子 1该例子通过 location.hash 属性得到 URL 中的锚：假设当前页面的 URL 是：http://www.5idev.com/p-java...
原生js的location.hash实现Vue路由
最新发布
u010234868的专栏
09-17
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href=".
JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果
qq_39155611的博客
06-05
1379
JavaScript通过改变location对象的hash属性的应用
前面我们学到了BOM的Location对象，现在来讲一下实际的应用。通过改变hash属性获取不同的数据。
1.列表页面代码：
<a href="10模拟详情页面.html#0" target="_blank">张三</a>
<a href="10模拟详情页面.html#1" target="_blank">李四</a>
<a href="10模拟详情页面.htm
location.hash的用法及onhashchange (精华，建议大家没事读一下)
热门推荐
babybk的博客
05-08
6万+
location.hash是什么: 熟悉HTML都知道喵链接，没错，location.hash就是获取或设置喵链接的。上面的用法相信大家都知道，但是下面的就要考细节了。
当我们载入一个页面后，然后又去触发了一个AJAX请求去部分改变了页面上的内容，这个时候，你会发现，浏览 器其实并没有记录这两个动作，而是把这两个动作记录为了一个动作，即是认为你只打开一个页面，所以“前进/后退”按钮就没有用
location.hash详解
哒哒哒
06-12
1万+
了解vue-router原理中更新URL但不重载页面原理之一location.hash1.存在形式及意义一般情况下为URL后 "#" 及其后面一部分组成，如http://www.test.com/#/something，其中http://www.test.com为真实的路径，而#/something则为网页中的位置，称之为锚点在访问锚点时会自动跳刀锚点所在的网页位置，通常有两种方式作为锚点<...
html 井号 转义,url中出现井号（"#"）的问题
weixin_36296983的博客
06-25
2657
今天在asp.net mvc网站项目的前台页面里写一段js代码时，想要跳转到某个url，例如location.href="xxxx?"+"id="+id+"&keyword="+keyword;其中id和keyword都是后台Controller的Action方法需要的参数，从html的input文本框的值，奇怪的是当在keyword文本框输入"#1作品"时，发现传到后台时keyword的...
Window.location.search和Window.location.hash区别
MLAY
06-16
421
search:只能取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空
hash: 第一个"#"之后的内容
window.location.hash详解
lhy_luan
02-24
4816
本文引用来源[http://www.cnblogs.com/yeer/archive/2013/01/21/2869827.html]一、#的涵义代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如， http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。为
window.location.hash 使用说明
时清云的博客
08-16
938
location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash=”#admin”。利用这个属性值可以做一个非常有意义的事情。window.locati
【学习分享】location.hash的用法
WEBCODE
10-07
222
【学习分享】location.hash的用法
location对象：设置或获取当前URL的信息
使用location对象可以设置或返回URL中的一些信息，一个完整的URL地址的格式为：
协议://主机:端口/路径名称?搜索条件#hash标识
其中，协议是URL的起始部分，用于指定该URL地 址所采用的通信协议，比如http、ftp等；主机是指该URL所对应的服务器的名称；端口用于指定服务器...
location.hash 原生js页面跳转/路由
lwx931449660的博客
09-02
2365
使用vue开发项目非常方便，vue全家桶让你想实现什么功能都更加便捷，但是使用原生js,jquery开发，页面之间跳转怎么实现呢，
下面说一下window.location.hash，概念性的东西大家看这篇文章，也比较全面，这里主要说下用法：
当前在做的这个项目，页面跳转使用的是hash，基本原理非常简单，在主页面跳转按钮中分别加上一个属性，data，id等都可以，用来标识当前要跳转的页面，然...
window.location.hash的小妙用
catherine的博客
09-27
1941
location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。
通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。然后再根据hash值
js去浏览器路径相关
weixin_33862993的博客
10-10
264
2019独角兽企业重金招聘Python工程师标准>>>
...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
luka2008
CSDN认证博客专家
CSDN认证企业博客
码龄15年
暂无认证
28
原创
8万+
周排名
33万+
总排名
35万+
访问
等级
2379
积分
28
粉丝
37
获赞
34
评论
61
收藏
私信
关注
热门文章
linux iptables开放端口命令
76702
POI实现DOC/DOCX转HTML
34029
使用 wget 完成批量下载
32888
跨域(二级域)session共享
25782
java.lang.ClassNotFoundException:org.apache.xerces.parsers.SAXParser
20804
分类专栏
springboot
3篇
tomcat
1篇
jQuery
4篇
Css
Java
12篇
Xweibo
1篇
CAS
3篇
Linux
11篇
openOffice
2篇
Java quartz
3篇
red5
2篇
POI
2篇
javascript
3篇
sql
1篇
mysql
7篇
web
1篇
htmltopdf
1篇
javascript plugin
1篇
windows
1篇
cookie
1篇
session
1篇
ffmpeg
3篇
swftools
1篇
libreoffice
1篇
html
1篇
nginx
1篇
gearman
3篇
html5
1篇
eclipse
1篇
maven
1篇
jvm
2篇
项目管理
研发管理
1篇
最新评论
POI实现DOC/DOCX转HTML
Web_Ranger:
您好，能否提供AbstractXWPFPOIConverterTest的maven
POI实现DOC/DOCX转HTML
泉8:
linux下不会乱码嘛？一样的代码，window下不会，linux下乱码了
POI实现DOC/DOCX转HTML
小鹿鹿鹿:
你好，这个方法的转换可以保留格式和表格样式吗？你的是怎么转的呢？请教一下，
POI实现DOC/DOCX转HTML
weixin_38757817:
这个转出来的html，不如用pageOffice通过doc转为html的效果好。
超级rtmp服务器和屌丝wowza
fengjihu:
哈哈……，好几年前写的东西，今天竟然被自己搜到了。
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
springboot集成shiro时循环重定向的问题
windows下tomcat日志乱码问题修复
记一次sringboot集成druid密码加密失效的问题排查
2020年4篇
2018年1篇
2017年2篇
2016年1篇
2015年11篇
2014年22篇
2013年15篇
2012年16篇
目录
目录
分类专栏
springboot
3篇
tomcat
1篇
jQuery
4篇
Css
Java
12篇
Xweibo
1篇
CAS
3篇
Linux
11篇
openOffice
2篇
Java quartz
3篇
red5
2篇
POI
2篇
javascript
3篇
sql
1篇
mysql
7篇
web
1篇
htmltopdf
1篇
javascript plugin
1篇
windows
1篇
cookie
1篇
session
1篇
ffmpeg
3篇
swftools
1篇
libreoffice
1篇
html
1篇
nginx
1篇
gearman
3篇
html5
1篇
eclipse
1篇
maven
1篇
jvm
2篇
项目管理
研发管理
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值