URL地址中的#

1、#的涵义

代表网页中的一个位置。井号后面的字符，就是该位置的标识符。比如，

http://www.baidu.com/index.html#one

就代表网页index.html的one位置。浏览器读取这个URL后，会自动滚动one的位置。

怎么为网页位置指定标识符，有两种方法。一是使用锚点，比如,
或者使用id属性，比如

2、HTTP请求不包括#

是用来指导浏览器动作的，对服务器端完全无用。

比如，访问下面的网址
http://www.baidu.com/index.html#one

浏览器实际发出的请求时这样的：
GET /index.html HTTP/1.1

Host：www.baidu.com

可以看到，只是请求index.html，根据没有"#one"的部分。

3、#后的字符
在第一个#后面出现的任何字符，都会被浏览器读为位置标识符。这意味着，这些字符都不会被发送到服务器端。

比如：下面URL的原意是制定一个颜色值：

http://www.baidu.com/?color=#fff

但是，浏览器实际发出的请求时：
GET /?color= HTTP/1.1

Host: www.baidu.com
可以看到，"#fff"被省略了。只有将#转码为%23，浏览器才会将其作为
实义字符处理。也就是说，上面的网址应该被写成：

http://www.baidu.com/?color=%23fff

4、改变#不触发网页重载

单单改变#后的部分，浏览器只会滚动到相应的位置，不会重新加载网页。

比如：从
http:www.baidu.com/index.html#one

改成http://www.baidu.com/index.html#two

浏览器不会重新向服务器请求index.html。

5、改变#会改变浏览器的访问历史

每一次改变#后的部分，都会在浏览器的访问历史中增加一个。
使用"后退"按钮，就可以回到上一个位置。

这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向
用户给出可以访问某个状态的连接。

值得注意的是，上述规则对IE6和IE7不成立，他们不会因为#的改变而增加历史。

6、window.location.hash读取#的值

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；
写入时，则会在不重载网页的前提下，创造访问历史。

7、onhashchange事件

这是一个HTML 5新增的事件，当#hash发生变化时，就会触发这个事件，IE8+、Firefox3.6+、Chrome 5+、Safari 4.0+支持
该事件。

它的使用方法有三种：
window.onhashchange = func;

window.addEventListener("hashChange",func, false);

8、Google抓取#的机制

默认情况下，Google的网络蜘蛛忽视URI的#部分。

但是，Google还规定，如果你希望ajax生成的内容被浏览器引擎读取，那么URL中可以使用
"#!"，Google 会自动将其后面的内容转化成查询字符串，_esacped_fragment_的值

比如，Google发现新版Twitter的url如下：

http://www.twitter.com/#!/username

就会自动抓取另一个URL

http://www.twitter.com/?_esacped_fragment_=/username

通过这种机制，Google就可以索引动态的ajax内容。

转载于:https://www.cnblogs.com/2018-05-9-ygk/p/9364166.html