location.hash 详解

摘要:
例如http://www.example.com/index.html#print代表网页索引html的打印位置。例如,访问以下网站:,http://www.example.com/index.html#print浏览器发送的实际请求如下:GET/index.htmlHTTP/1.1主机:www.example。com Html,根本没有“#print”部分。例如,从http://www.example.com/index.html#location1已更改为http://www.example.com/index.html#location2浏览器不会重新请求索引。html。6、 窗口位置。hash Read#值窗口。location哈希属性可读写。它可以三种方式使用:window onhashchange=func;窗addEventListener;对于不支持onhashchange的浏览器,可以使用setInterval监视location.hash的更改。

前年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 >。

二、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内容。

免责声明:文章转载自《location.hash 详解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MongoDB 聚合查询Hrbust 1541集合划分 &amp;amp; Hrbust 2002幂集【dp】下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

海量小文件存储与Ceph实践

  海量小文件存储(简称LOSF,lots of small files)出现后,就一直是业界的难题,众多博文(如[1])对此问题进行了阐述与分析,许多互联网公司也针对自己的具体场景研发了自己的存储方案(如taobao开源的TFS,facebook自主研发的Haystack),还有一些公司在现有开源项目(如hbase,fastdfs,mfs等)基础上做针对...

安装Nginx并为node.js设置反向代理

最近看了反向代理和正向代理的东西,想到自己的node.js服务器是运行在3333端口的,也没有为他设置反向代理,node.js项目的一些静态文件是完全可以部署在Nginx上,以减少对node.js的请求。 着手开始做: 1、Nginx依赖gcc,pcre,zlib,openssl之类的库,通过rpm -qa | grep gcc查询,没有的话都安装上。 2...

pyqt5 + pyinstaller 制作爬虫小程序

环境:mac python3.7 pyqt5 pyinstaller ps: 主要是熟悉pyqt5, 加入了单选框 输入框 文本框 文件夹选择框及日历下拉框 效果图: pyqt5 主程序文件  # -*- coding: utf-8 -*- # @Author: Mehaei # @Date: 2019-07-10 13:02:56 # @Last...

Python笔记---错误笔记

Python---错误笔记 1. Python编码问题: 我们在编写 Python 脚本时,往往会写上中文凝视。可是有时候,当我们执行程序时。却发现例如以下错误:SyntaxError: Non-ASCII character 'xe5' in file /home/johnnie/Files/Workspace/python/head_first/ch...

python-requests.post方法中data与json参数区别

 GET 在通过requests.get()进行GET请求时,key1=value1&key2=value2可以写成字典形式在parms中传参 from common.baseRquest import BaseRquest url ='http://10.162.16.5:8072/contents/list' parm = { "con...

JS读取粘贴板内容

1.1 监听onpaste事件 1.1.1 定义和用法 npaste 事件在用户向元素中粘贴文本时触发。 注意:虽然使用的 HTML 元素都支持 onpaste 事件,但实际上并非支持所有元素,例如 <p> 元素, 除非设置了 contenteditable 为 "true" (查看下文的更多实例)。 提示:onpaste 事件通常用于 typ...