`
zha_zi
  • 浏览: 596337 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

你不知道的URL中#井号用法

 
阅读更多

           URL 中 # 井号的用法 

       我们经常使用URL 定位,传递参数等应用,最经常使用的是? 问号,一般作为参数传递,而我们在接触到单页开发模式的时候会接触到url 中大量# 井号的使用,有时候会对这三个常见符号有些分不清,搞不懂具体含义。

# 井号介绍

涵义

 在url 中使用# 例如  index.html#product  含义一般是定位到本页面的product位置,所以# 在url 中一般是作为页面定位使用,那么product 到底是用什么定位

1:<a name="product">

2:<div id="product">

这两种方式都可以把滚动条定位到页面的响应位置

twitter 在改版的时候把 改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username 这是主流网站第一次将"#"大规模用于重要URL中。这表明井号(Hash)的作用正在被重新认识

 

 

特性1:HTTP 请求中的作用

   是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。

比如,访问下面的网址,http://www.example.com/index.html#print,浏览器实际发出的请求是这样的:

GET /index.html HTTP/1.1
Host: www.example.com

 在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。

比如,下面URL的原意是指定一个颜色值:http://www.example.com/?color=#fff,但是,浏览器实际发出的请求是:

GET /?color= HTTP/1.1
Host: www.example.com

 

特性2:改版#不会导致网页重载

    单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
比如,从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2,浏览器不会重新向服务器请求index.html。

 

特性3:改版# 后对history 范围历史的影响

 每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。

 

鉴于特性2,3 实现了在单页下view 的路由和历史回退,目前h5手机开发所采用的单页模式的基础

 

特性4:window.location.hash读取#值

 window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

 

特性5:onhashchange事件 H5新增

这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
  它的使用方法有三种:

window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);

 

对于不支持onhashchange的浏览器,可以用setInterval监控location.hash的变化。

 

特性6:Google抓取#的机制

      默认情况下,Google的网络蜘蛛忽视URL的#部分。
  但是,Google还规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用"#!",Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。
  比如,Google发现新版twitter的URL:http://twitter.com/#!/username
  就会自动抓取另一个URL:http://twitter.com/?_escaped_fragment_=/username
  通过这种机制,Google就可以索引动态的Ajax内容。

 

 

分享到:
评论

相关推荐

    php获取URL中带#号等特殊符号参数的解决方法

    使用这种方法,即使URL参数值中包含如井号(#)这样的特殊符号,我们也能够正确地获取完整的值。 最后,需要提醒的是,虽然escape函数能够解决特殊符号带来的问题,但自ECMAScript 5起,escape函数已被废弃,现代...

    struts2 井号,星号,百分号的含义和使用举例.doc

    总结起来,Struts2中的井号(#)、星号(*)和百分号(%)在OGNL表达式语言中有着特定的含义和用法,它们极大地提高了代码的可读性和维护性,简化了Web应用开发中的数据处理和逻辑表达。通过熟练掌握这些符号的使用...

    URL转码及不能被转码的特殊字符

    - “#”(井号)——用于分隔URL的主体与片段标识符。 - “=”(等号)——用于分隔查询字符串中的键值对。 - “&”(与号)——用于连接查询字符串中的多个参数。 这些字符在URL中具有特殊的语法意义,如果对其...

    URL编码表一览

    URL编码(也称为百分号编码)是一种用于在URL中表示特殊字符的方法。这是因为URL中的某些字符在不同的上下文中可能具有特殊含义,例如空格、斜杠等。为了确保这些字符能正确地被解析并传输,就需要将它们转换成一种...

    URL 的具体分析

    标题 "URL 的具体分析" 涉及到的是互联网中用于资源定位的统一资源定位符(Uniform Resource Locator,简称URL)的相关知识。URL是互联网上标准的资源地址,它允许我们通过网络访问各种资源,如网页、图片、视频等。...

    移除AngularJS下URL中的#字符的方法

    AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如:  http://example.com/  http://example.com/#/about  http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了...

    java URL的组成部分

    在Java编程语言中,URL(Uniform Resource Locator)是...了解和熟练掌握URL的构造及其在Java中的使用,是进行网络编程的基础,无论是进行简单的网页请求,还是复杂的网络数据交换,都离不开对URL的正确理解和操作。

    URL.rar_url_url解析

    在JavaScript中,可以使用`URL`对象进行解析: ```javascript let url = new URL('http://www.example.com/path/to/page.html?key1=value1&key2=value2#section1'); console.log(url.protocol); // 输出: 'http:' ...

    url正则表达式

    例如,在JavaScript中,可以使用`test()`或`match()`方法。 4. **工具应用** 正则表达式工具如Regex101或RegExr可以帮助测试和调试URL正则表达式。这些工具提供了实时反馈,显示匹配的部分以及如何与输入字符串...

    url特殊字符

    标题“URL特殊字符”涉及到的是在互联网中使用URL(统一资源定位符)时遇到的一些特殊字符问题。URL是用于在互联网上唯一标识资源的字符串,它由若干个部分组成,包括协议、主机名、路径、查询参数等。在URL中,某些...

    vue不通过路由直接获取url中参数的方法示例

    **第三步:在Vue组件中使用方法** 现在,你可以在任何Vue组件中调用`this.$utils.getUrlKey`来获取URL参数。例如,假设你想获取名为`channel`的参数,可以这样做: ```javascript export default { mounted() { ...

    python3处理含有中文的url方法

    在Python编程中,URL(统一资源定位符)通常由ASCII字符集组成,不支持直接包含中文字符。然而,在处理含有中文的URL时,我们需要进行特殊处理以确保它们能被正确编码和解析。本文将深入探讨如何在Python 3中处理...

    URL分析示例程序

    总的来说,通过学习和实践"URL分析示例",你可以深入了解URL的结构和处理方法,提高网络编程和数据抓取的能力。同时,理解并运用"GetDownloadUrlPlg",可以进一步提升从复杂网页中获取有价值信息的技能。在IT行业中...

    两种方法解决javascript url post 特殊字符转义 + & #

    总结来说,当我们在使用JavaScript进行URL传值时,面对URL中的特殊字符,主要可以通过两种方法解决转义问题:一是手动替换为百分号编码,二是使用内置的encodeURIComponent()函数。手动替换的方法适用于已知需要转义...

    jsp中URL传递中文参数的处理方法

    综上所述,JSP中处理URL传递中文参数的方法主要涉及在前端使用JavaScript的encodeURI()或encodeURIComponent()函数进行编码,并在后端使用Java的URLDecoder.decode()函数进行解码。通过这种方式,可以确保URL中传递...

    关于URL中的特殊符号使用介绍

    总之,理解和正确使用JavaScript中的URL编码函数对于构建和处理URL至关重要,特别是当你需要在URL中包含特殊字符或者在不同环境下交互数据时。记得根据具体需求选择合适的编码方法,避免出现访问资源失败的问题。

    使用JavaScript解析URL的方法示例

    在本文中,我们将学习如何使用JavaScript中的URL对象来解析URL,通过实例代码,为大家展示如何获取URL中的协议、主机名、端口、路径和查询字符串等信息。 首先,要明确URL的定义。URL,全称为统一资源定位符...

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    需要注意的是,上述方法一和方法二都适用于处理URL中包含特殊字符的情况,但在实际的开发场景中,我们需要根据实际需求选择合适的方法。 总结,对于在JavaScript中通过表单提交URL参数包含特殊字符(如"+")的问题...

    JS过滤url参数特殊字符的实现方法

    2. 本方法仅用于处理参数中的特殊字符,对于URL的其他部分的编码和解码,应当使用浏览器提供的`encodeURIComponent`和`decodeURIComponent`函数,以避免不必要的编码错误。 3. 在实际应用中,还应当根据实际情况考虑...

Global site tag (gtag.js) - Google Analytics