window.location.hash知识汇总

本文将深入JavaScript中的window.location.hash属性及其相关应用。这个属性在网页开发中扮演着重要角色，能够让我们在不重载网页的情况下改变页面的状态和内容。以下是对该知识点的详细和实用案例。

一、理解window.location.hash的“”涵义

在URL中，“”代表网页中的一个位置标识。它右侧的字符即为该位置的标识符，如"admin"。通过锚点或id属性，我们可以为网页指定位置标识符。例如，在HTML中使用``或`

二、HTTP请求中的“”处理机制

值得注意的是，“”在HTTP请求中是不被包括的。它主要用于指导浏览器的行为，对服务器端而言无用。这意味着当你访问带有“”的时，浏览器只会滚动到对应位置，而不会向服务器发送新的请求。例如，访问时，浏览器实际发出的请求只包含index.html，而不包括"print"。

三、后的字符

在URL中，“”后面出现的任何字符都会被浏览器解读为位置标识符，这些字符不会被发送到服务器端。这意味着某些情况下，我们可能需要转码""，例如将"fff"转码为"%23"，浏览器才会将其作为实义字符处理。

四、关于改变值的特性

改变URL中的值，浏览器只会滚动到相应位置，而不会重新加载网页。这使得我们可以利用不同的值表示不同的页面状态，为用户提供可访问的链接。这对于AJAX应用程序特别有用，可以通过改变值来实现不同的功能，而不必重新加载整个页面。值得注意的是，IE 6和IE 7在处理值时有所不同，它们不会因为的改变而增加历史记录。

五、window.location.hash的应用

window.location.hash属性可读可写，我们可以利用它来判断网页状态是否改变。写入该属性可以在不重载网页的前提下创造一条访问历史记录。当值发生变化时，会触发onhashchange事件。这一事件在支持该事件的浏览器中可以方便我们监听URL的变化并进行相应的处理。对于不支持onhashchange的浏览器，我们可以使用setInterval函数来监控location.hash的变化。

六、Google对带有“”URL的抓取机制

默认情况下，Google的网络蜘蛛会忽视URL的部分。这意味着我们可以通过改变URL的值来改变页面的内容或状态，而不影响搜索引擎的抓取和索引。这为单页应用程序（SPA）提供了一种有效的SEO优化策略。然而需要注意的是，某些情况下可能需要额外的配置和策略来确保搜索引擎能够正确抓取和理解网页内容。

本文详细了window.location.hash的相关知识，包括其在URL中的角色、HTTP请求中的处理机制、以及实际应用中的注意事项和技巧等。希望这些内容对你在网页开发中的工作有所帮助。在实际应用中，请根据你的需求和项目特点选择合适的策略和技术来实现最佳效果。Google对于Ajax内容的索引策略，巧妙利用了URL中的“!”来读取动态内容。新版Twitter的URL就是一个生动的例子，通过这一机制，Google能够索引那些由Ajax生成的内容。这对于那些依赖动态内容更新的网站来说，无疑是一个好消息。

关于一位网友遇到的问题，当点击按钮改变浏览器地址栏的值而不发送新的服务器请求时，浏览器的“后退”和“前进”按钮可能会受到影响。在某些浏览器中，如Firefox 3，页面的后退和前进功能可以正常使用，但在Internet Explorer下却无法正常使用。

关于hash结合ajax的使用，狼蚁网站的SEO优化策略为我们提供了一个解决方案。当ajax更新页面时，浏览器不会产生历史记录，导致后退和前进按钮失去作用。这时可以结合hash和window.onhashchange来解决问题。需要注意的是，IE6和IE7不支持onhashchange，但可以通过setInterval定期检查hash的改变或使用onload中的检查方法来实现类似功能。

具体来说，我们有一个简单的html页面结构和一个ajax请求的处理脚本。当点击按钮时，会触发GetT函数更新页面内容并发送ajax请求。在ajax请求完成后，我们通过改变hash值来更新页面的状态。我们利用window.onhashchange来检测hash值的变化并获取对应的历史数据。这是一个很巧妙的策略，允许我们在不刷新页面的情况下获取新的数据并保持浏览器的导航功能。

具体来说：

1. AjaxHasPool是我们自定义的ajax类，用于发送ajax请求。

2. 我们使用一个Object对象来保存历史记录。这里的对象属性是以数字命名的，所以需要使用obj["1"]的方式来实例化它以避免违反命名规范。

3. 我们使用window.onhashchange来检测hash值的变化并获取历史数据。每当用户点击按钮并发送ajax请求后，我们会更新hash值并利用window.onhashchange获取相应的数据来更新页面内容。这样，即使在不刷新页面的情况下，用户也可以通过浏览器的后退和前进按钮来浏览不同的页面状态。这种技术对于提高用户体验和SEO优化都有很大的帮助。