1. 包含#
的url是什么?
包含#
符号的url就是一个 Fragment URL。#
指定了网页中的一个位置。
name
属性值匹配
print
的
<a>
标签。即:
<a name="print"></a>
,
或者是
id
属性匹配
print
的
<a>
标签。即
<a id="print"></a>
匹配后,浏览器会将该部分滚动到可视区域的顶部。
2. Http请求不包括#
#
仅仅作用于浏览器,它不会影响服务器端。所以http请求中不会包括#
。
访问下面的网址
http://www.example.com/index.html#print
复制代码
浏览器实际发出的请求
GET /index.html HTTP/1.1
Host: www.example.com
复制代码
3. #
后面的所有字符,都会被浏览器当做位置标志符。
表单提交时,如果提交字符中带有#
字符,后面的参数就会被截断了。
4. 修改#
不会导致页面重新加载,但是会改变浏览器的历史记录
location.href += '#caper'; //页面不会刷新
复制代码
浏览器滚动到新的位置,但是并没有reload整个页面。
但是,它改变了浏览器记录,我们可以通过浏览器上一页
按钮回到原始的位置。
这个功能对单页面应用非常的有用。
5. javascript 可以通过 window.location.hash
来读取或改变 #
6. 谷歌的网络蜘蛛默认会忽略#后面的内容
谷歌网络蜘蛛负责爬取网页的内容,以及网页里面的链接,它们会成为google搜索索引的一部分。网络蜘蛛会抓取并分析HTML,但由于它并不是浏览器程序,也没有javascript引擎,页面上用来加载显示内容的javascript并不会被执行。因此,#后面的字符会被网络蜘蛛忽视,只抓取#前面的内容,举例:
http://www.cnblogs.com/#casper
http://www.cnblogs.com/#chyingp
复制代码
这点无论对于开发者,还是搜索引擎都是不利的,前者辛苦创作的内容(应用)少了很多被访问的机会,而后者则失去了进一步丰富其内容索引的机会,特别是在ajax应用越来越多的今天。
解决方案 hash bang
只要将#改成#!即可,实现大致为:当网络蜘蛛遇到#!时候,会自动将#!identifier
转成_escaped_fragment_=identifier
形式的参数。但是:
- 将
#
改成!#
告诉网络蜘蛛:我们支持这个解决方案:hash bang
- 相应的,我们的应用也需要具备相应的支持能力,对于网络蜘蛛带
escaped_fragment=casper
的GET请求,需要能够提供相应的网页内容
7. onhashchange 事件
这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
复制代码