URL中的#

时间 2019-11-17

标签 url 栏目 HTTP/TCP 繁體版

原文原文链接

1. 包含`#`的url是什么？

包含#符号的url就是一个 Fragment URL。#指定了网页中的一个位置。 javascript

浏览器就会查询网页中 name属性值匹配 print的 <a>标签。即： <a name="print"></a> ，
或者是 id 属性匹配 print 的 <a> 标签。即 <a id="print"></a>
匹配后，浏览器会将该部分滚动到可视区域的顶部。

2. Http请求不包括`#`

#仅仅做用于浏览器，它不会影响服务器端。因此http请求中不会包括#。
访问下面的网址html

http://www.example.com/index.html#print
复制代码

浏览器实际发出的请求java

GET /index.html HTTP/1.1
    Host: www.example.com
复制代码

3. `#`后面的全部字符，都会被浏览器当作位置标志符。

表单提交时，若是提交字符中带有#字符,后面的参数就会被截断了。ajax

4. 修改`#`不会致使页面从新加载，可是会改变浏览器的历史记录

location.href += '#caper';  //页面不会刷新
复制代码

浏览器滚动到新的位置，可是并无reload整个页面。json

可是，它改变了浏览器记录，咱们能够经过浏览器上一页按钮回到原始的位置。
这个功能对单页面应用很是的有用。浏览器

5. javascript 能够经过 `window.location.hash`来读取或改变 `#`

6. 谷歌的网络蜘蛛默认会忽略＃后面的内容

谷歌网络蜘蛛负责爬取网页的内容，以及网页里面的连接，它们会成为google搜索索引的一部分。网络蜘蛛会抓取并分析HTML，但因为它并非浏览器程序，也没有javascript引擎，页面上用来加载显示内容的javascript并不会被执行。所以，＃后面的字符会被网络蜘蛛忽视，只抓取＃前面的内容，举例：bash

http://www.cnblogs.com/#casper
http://www.cnblogs.com/#chyingp
复制代码

这点不管对于开发者，仍是搜索引擎都是不利的，前者辛苦创做的内容(应用)少了不少被访问的机会，然后者则失去了进一步丰富其内容索引的机会，特别是在ajax应用愈来愈多的今天。服务器

解决方案 hash bang网络

只要将＃改为#!便可，实现大体为：当网络蜘蛛遇到#!时候，会自动将#!identifier转成_escaped_fragment_=identifier形式的参数。可是：ide

将#改为!#告诉网络蜘蛛：咱们支持这个解决方案：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);
复制代码

参考文档

6 Things You Should Know About Fragment URLs

URL的井号

URL中的#

1. 包含#的url是什么？

2. Http请求不包括#

3. #后面的全部字符，都会被浏览器当作位置标志符。

4. 修改#不会致使页面从新加载，可是会改变浏览器的历史记录

5. javascript 能够经过 window.location.hash来读取或改变 #