1. 包含 #的 url 是什么?
包含 #符号的 url 就是一个 Fragment URL.# 指定了网页中的一个位置.
浏览器就会查询网页中 name 属性值匹配 print 的 < a > 标签. 即:
- <a name="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 可以通过
Windows.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 + 支持该事件.
它的使用方法有三种:
- Windows.onhashchange = func;
- <body onhashchange="func();">
- Windows.addEventListener("hashchange", func, false);
参考文档
6 Things You Should Know About Fragment URLs
URL 的井号
来源: https://juejin.im/post/5be247c2e51d457b1756b8a4