location.hash学习

待我称王封你为后i 2022-06-10 14:40 121阅读 0赞

一、\#的涵义

\# 代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，

http://www.example.com/index.html#print

就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。

为网页位置指定标识符，有两个方法。

一是使用锚点，比如

<a name="print"></a>

二是使用id属性，比如

<div id="print" >

二、HTTP请求不包括\#

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

比如，访问下面的网址，

`http://www.example.com/index.html#print`

浏览器实际发出的请求是这样的：

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

可以看到，只是请求index.html，根本没有”\#print”的部分。

三、\#后的字符

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

比如，下面URL的原意是指定一个颜色值：

http://www.example.com/?color=#fff

但是，浏览器实际发出的请求是：

GET /?color= HTTP/1.1

Host: www.example.com

可以看到，”\#fff”被省略了。只有将\#转码为%23，浏览器才会将其作为实义字符处理。也就是说，上面的网址应该被写成：

http://example.com/?color=%23fff

四、改变\#不触发网页重载

单单改变\#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

比如，从

http://www.example.com/index.html#location1

改成

http://www.example.com/index.html#location2

浏览器不会重新向服务器请求index.html。

五、改变\#会改变浏览器的访问历史

每一次改变\#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

这对于ajax应用程序特别有用，可以用不同的\#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为\#的改变而增加历史记录。

六、window.location.hash读取\#值

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

七、onhashchange事件

这是一个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`的变化。

八、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内容。

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关怎么学习深度学习和机器学习

学习深度学习和机器学习是一个很有趣的过程，有很多方法可以帮助您加深对这些技术的理解。一种常见的方法是通过课程学习。您可以在大学或在线课程平台上找到许多机器学习和深度学习课程

电玩女神/ 2024年03月26日 09:37/ 0 赞/ 62 阅读

相关【机器学习】迁移学习

迁移学习：给定一个有标记的源域和一个无标记的目标域。这两个领域的数据分布不同。迁移学习的目的就是要借助源域的知识，来学习目标域的知识(标签)。或是指基于源域数据和目标域数据、源

浅浅的花香味﹌/ 2024年02月17日 11:11/ 0 赞/ 66 阅读

相关 AI人工智能机器学习的类型：监督学习、无监督学习、半监督学习、增强学习和深度学习

随着科技的不断发展，人工智能（Artificial Intelligence，简称AI）已经成为当下热门的话题。AI的核心技术之一就是机器学习（Machine Learning

一时失言乱红尘/ 2023年10月10日 19:34/ 0 赞/ 45 阅读

相关学习经验-学习方法论

学习经验-学习方法论转载声明本文系转载自以下文章： [学习从来不是一件简单地事情][Link 1] 作者：网易-范欣欣转载仅为方便学习

太过爱你忘了你带给我的痛/ 2023年08月17日 16:41/ 0 赞/ 135 阅读

相关学习php_学习PHP

学习php PHP is a programming language used to enhance websites built with HTML. It is ser

ゝ一纸荒年。/ 2022年12月06日 15:25/ 0 赞/ 269 阅读

相关学习java_学习Java

分阶段进阶教学+阶段考评让学习无死角因为考虑学员基础水平参差不齐，所以动力节点的课程安排对学员进行科学细致的划分，整个教学安排共分两大部分即：基础部分和就业部分，基础部分

深碍√TFBOYSˉ_/ 2022年11月01日 10:57/ 0 赞/ 351 阅读

相关强化学习：Q-学习

这篇教程通过简单且易于理解的实例介绍了Q-学习的概念知识，例子描述了一个智能体通过非监督学习的方法对未知的环境进行学习。假设我们的楼层内共有5个房间，房间之间通过一道门相

迈不过友情╰/ 2022年05月22日 23:07/ 0 赞/ 348 阅读

相关机器学习(四)之如何学习机器学习

推荐一篇很好的文章,本文部分借鉴于: Kaggle的“手写识别” : [https://www.jianshu.com/p/696bde1641d8][https_www.ji

一时失言乱红尘/ 2022年05月08日 13:14/ 0 赞/ 470 阅读

相关机器学习学习笔记

机器学习应用 1. 自动驾驶 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

忘是亡心i/ 2022年03月22日 08:13/ 0 赞/ 373 阅读

相关深度学习学习目录

<table> <thead> <tr> <th>目录</th> <th>链接</th> </tr> </thead> <tbody>

太过爱你忘了你带给我的痛/ 2022年02月25日 05:10/ 0 赞/ 426 阅读