URL中的#

栏目: 后端 · 前端 · 发布时间: 6年前

内容简介:包含浏览器就会查询网页中匹配后,浏览器会将该部分滚动到可视区域的顶部。

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

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 可以通过 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);
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First Design Patterns

Head First Design Patterns

Elisabeth Freeman、Eric Freeman、Bert Bates、Kathy Sierra、Elisabeth Robson / O'Reilly Media / 2004-11-1 / USD 49.99

You're not alone. At any given moment, somewhere in the world someone struggles with the same software design problems you have. You know you don't want to reinvent the wheel (or worse, a flat tire),......一起来看看 《Head First Design Patterns》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具