URL中的#

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

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

包含 # 符号的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);
复制代码

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

查看所有标签

猜你喜欢:

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

伟大创意的诞生

伟大创意的诞生

史蒂文·约翰逊 (Steven Johnson) / 盛杨燕 / 浙江人民出版社 / 2014-8-1 / CNY 52.90

 大家都认得出好创意。印刷机、铅笔、抽水马桶、电池、互联网、GPS、Google——这些都是绝妙的创意。然而,它们是如何产生的?被喻为“科技界的达尔文”的作者,在《伟大创意的诞生》一书中,提供了深具启示意义以及有论证实据的答案。  作者史蒂文•约翰逊以富有感染力、包罗万象的风格游历于多重领域,从神经生物学、都市研究,到网络文化,找出了独特创新背后的7大关键模式,深入人类600年重要发明的......一起来看看 《伟大创意的诞生》 这本书的介绍吧!

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

Base64 编码/解码

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

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具