location.hash详解

一、#的涵义

#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,

  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 onhashchange="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内容。

时间: 2024-10-04 22:21:41

location.hash详解的相关文章

location.search 详解

JS中location.search什么意思 设置或获取网页地址跟在问号后面的部分 当以get方式在url中传递了请求参数时,可以利用location的search属性提取参数的值,下面的代码把参数的名称和对应的值存储在2个数组中. <script>function test(){var url=window.location.search;if(url.indexOf("?")!=-1) {    var str = url.substr(1)     strs = st

JS代码的window.location属性详解

window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 href 完整的 URL pathname 当前 URL 的路径部分 port 当前 URL 的端口号 protocol 当前 URL 的协议 search 从问号 (?) 开始的 URL(查询部分)

nginx的location配置详解

语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因此请求为/static/20%/aa,可以被规则^~ /static/ /aa匹配到(注意是空格). ~ 开头表示区分大小写的正则匹配 ~*  开头表示不区分大小写的正则匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 的正则 / 通用匹配,任何请求都会匹配到. 多个location配置

Nginx 的location配置详解

Nginx 允许用户定义 Location block ,并指定一个匹配模式(pattern)匹配特定的 URI.除了简单的字符串(比如文件系统路径),还允许使用更为复杂的匹配模式(pattern). Location block 的基本语法形式是: location [=|~|~*|^~|@] pattern { ... } [=|~|~*|^~|@] 被称作 location modifier ,这会定义 Nginx 如何去匹配其后的 pattern ,以及该 pattern 的最基本的属性

探索c#之一致性Hash详解

阅读目录: 使用场景 算法原理 虚拟节点 代码示例 使用场景 以Redis为例,当系统需要缓存的内容超过单机内存大小时,例如要缓存100G数据,单机内存仅有16G时.这时候就需要考虑进行缓存数据分片,也即是把100G的数据拆分成多块小于单机内存的数据.例如以10G为单位,拆分10份,存储到多台机器节点上. 但是数据怎么个分法更合理呢? . f(key)%n 这里配置n=10,不同的key根据数值余数映射到对应的机器. 很简单的办法就解决了多台节点key分法的问题.然而数据大小的增长和缩减是很难预

nginx配置文件中的location中文详解

location 语法:location [=|~|~*|^~] /uri/ { … }默认:否 上下文:server 这个指令随URL不同而接受不同的结构.你可以配置使用常规字符串和正则表达式.如果使用正则表达式,你必须使用 ~* 前缀选择不区分大小写的匹配或者 ~ 选择区分大小写的匹配. 确定 哪个location 指令匹配一个特定指令,常规字符串第一个测试.常规字符串匹配请求的开始部分并且区分大小写,最明确的匹配将会被使用(查看下文明白 nginx 怎么确定它).然后正则表达式按照配置文件

nginx location优先级详解

nginx中location有几种: 1.前缀,可以有=或^~修饰,比如 location  /       /开头的 location /img/     /img/开头的 location = /a.htm      刚好/a.htm location ^~ /d    匹配后不再检查正则表达式location.注意这个意思不是非正则表达式!除了~开头其他都是非正则表达式,也就是前缀匹配 2.正则表达式,固定~或~*(不区分大小写)开头,比如: location ~  \.html$ loc

hash详解

首先介绍一下hash? 事实上是一种叫做蛤丝的病毒 hash的做法: 首先设一个进制数base,并设一个模数mod 而哈希其实就是把一个数转化为一个值,这个值是base进制的,储存在哈希表中,注意一下在存入的时候取模一下即可 比如说现在有一个字符串orzc 枚举这个字符串的每一位,与base相乘得到ans,然后mod一下,就得到orzc的哈希值 但是哈希有一个很大的弊端: 哈希冲突 什么是哈希冲突呢? 就比如说orzc的哈希值是233,而orzhjw的哈希值也是233 那么我们在查询的时候代码会

ngnix location指令详解

Nginx的HTTP配置主要包括三个区块,结构如下: http { //这个是协议级别 include mime.types; default_type application/octet-stream; keepalive_timeout 65; gzip on; server { //这个是服务器级别 listen 80; server_name localhost; location / { //这个是请求级别 root html; index index.html index.htm;