URL的井号

去年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 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内容。

(完)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十六):xadmin的进阶开发

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

27620
来自专栏Django Scrapy

python3 下 Zabbix监控调用graph.get并且下载监控图

这个代码是如何访问三个不同机房并将传入的zabbix中的监控机器的ip进行判断(因为后来需要登陆网站,不同的机房名称不一样) 可以输入两个参数 只输入IP ...

57670
来自专栏木头编程 - moTzxx

PHP base64 编码转化图片并进行指定路径的保存和上传处理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

24910
来自专栏从零开始学自动化测试

Fiddler抓包9-保存会话(save)

前言 为什么要保存会话呢?举个很简单的场景,你在上海测试某个功能接口的时候,发现了一个BUG,而开发这个接口的开发人员是北京的一家合作公司。你这时候给对方开发提...

36450
来自专栏IT派

静态站点生成器:makesite.py

通过在Python中编写自己的简单、轻量级、无魔法的静态站点生成器,完全控制静态网站/博客生成。对的!重新发明轮子,伙计们!

16230
来自专栏葡萄城控件技术团队

带你走近AngularJS - 基本功能介绍

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创...

219100
来自专栏python爬虫实战之路

网络字体反爬之起点中文小说

前几天跟同事聊到最近在看什么小说,想起之前看过一篇文章说的是网络十大水文,就想把起点上的小说信息爬一下,搞点可视化数据看看。这段时间正在看爬虫框架-pyspid...

22420
来自专栏云计算教程系列

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

邮政地址通常很长,有时很难记住。在许多情况下,需要较短的地址。例如,能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen...

16320
来自专栏机器学习和数学

[编程经验] Python中使用selenium进行动态爬虫

Hello,大家好!停更了这么久,中间发生了很多事情,我的心情也发生了很大的变化,看着每天在增长的粉丝,实在不想就这么放弃了,所以以后我会尽量保持在一周一篇的进...

19820
来自专栏游戏杂谈

Xcode修改项目的Build Location

可以在项目最左侧的文件列表里展开Product,查看输出文件,按住control单击可以在Finder中显示,右侧辅助区域也会看到全路径

15120

扫码关注云+社区

领取腾讯云代金券