URL中的的井号

URL中的井号(#)

一、涵义

井号(#)代表网页中的一个位置，其右面的字符，就是该位置的标识符

浏览器读取这个URL后，会自动将标识符位置滚动至可视区域。

为网页位置指定标识符，有两个方法

使用锚点，通过a标签的name属性指定，如<a name="demo"></a>
使用id属性，通过元素的id属性指定，如<div id="demo">

二、HTTP请求不包括

井号(#)是用来指导浏览器动作的，对服务器端完全无用

三、#后的字符

在第一个井号(#)后面出现的任何字符，都会被浏览器解读为位置标识符，这些字符都不会被发送到服务器端。

如下面URL的原意是指定一个颜色值：
http://www.example.com/?color=#fff

但是，浏览器实际发出的请求是：http://www.example.com/?color=，"#fff"被省略了。只有将#转码为%23，浏览器才会将其作为实义字符处理。

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

单单改变井号(#)后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也不会重新向服务器请求资源

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

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

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

六、window.location.hash读取#值

window.location.hash属性可读可写

读取时可以用来判断网页状态是否改变

写入时会在不重载网页的前提下创造一条访问历史记录

七、onhashchange事件

这是一个HTML 5新增的事件，当井号(#)值发生变化时，就会触发这个事件

    window.onhashchange = func;
    
    window.addEventListener("hashchange", func, false);

八、Google抓取#的机制

默认情况下，Google的网络蜘蛛忽视URL的井号(#)部分

越来越多的网站，开始采用"单页面结构"，整个网站只有一张网页，采用Ajax技术，根据用户的输入，加载不同的内容，这种做法的好处是用户体验好、节省流量，缺点是AJAX内容无法被搜索引擎抓取。

Google规定，如果希望井号(#)之后的字符被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

如URL：http://twitter.com/#!/username

会自动抓取URL：http://twitter.com/?_escaped_fragment_=/username

但是问题是，"井号+感叹号"非常难看且烦琐。Twitter曾经采用这种结构，结果用户抱怨连连，只用了半年就废除了。