首先,感谢回答问题的各位!=)
我现在已经做了更多的研究,并且我相信我对我的实现感到满意。以下是我的研究结果。
首先是我完成的Hash
库。这是一个独立的库,没有依赖关系。它有两个函数:Hash.init(callback,iframe)
和Hash.go(newHash)
。每当哈希值发生变化时,回调函数被调用,新哈希作为其第一个参数传递,第二个参数作为标志,指示回调是由于初始状态(true
)还是由于哈希值的实际更改(false
)而被调用。
Hash.js (MIT许可证)
我还制作了一个jQuery插件,使其更易于使用。同时添加了全局hashchange
事件。请参见源代码中的示例。
jquery.hash.js (MIT许可证)
要查看它们的使用情况,请转到我的JavaScript“领域”页面:
Blixt的JavaScript领域
Internet Explorer 8
顺畅航行!只需将一个onhashchange
事件附加到window
对象(使用attachEvent
),并在事件处理程序中获取location.hash
值。
无论用户是否单击带有哈希值的链接,或者您是否以编程方式设置哈希值,历史记录都会被完美地保存。
Chrome、Firefox、Safari 3+、Opera 8+
顺畅的浏览!只需使用setInterval
和函数,轮询检查location.hash
属性的更改记录。
历史记录可以完美工作。对于Opera浏览器,我将history.navigationMode
设置为'compatible'
。说实话,我不确定它具体是什么作用,我是在YUI代码的评论中得到的建议。
注意: Opera 浏览器需要进行额外的测试,但至目前为止对我来说已经运行良好。
惊喜的小问题奖励!(真的吗?!) 原来 Firefox 浏览器(仅在3.5+版本中确认)会解码location.hash
属性,因此这可能会触发两次 hashchange
事件(先是编码版本,然后是未编码版本)。我的 Hash.js 库有一个新版本,通过使用 location.href
属性来解决该问题(由 Aaron Ogle 提供更改)。
Internet Explorer 6、7
现在问题变得更加复杂。较旧版本的 Internet Explorer 浏览器中的导航历史忽略哈希变化。为了解决这个问题,通常接受的解决方案是创建一个 iframe
,并将其内容设置为新的哈希。这会在导航历史中创建一个新条目。当用户返回时,这将使iframe
的内容恢复为其先前的内容。通过检测内容的更改,可以获取并将其设置为活动哈希。
仍然需要检查 location.hash
属性是否更改,以处理当前地址的手动更改。但请注意下面提到的小问题。
虽然这个解决方案似乎是最好的解决方案,但在 Internet Explorer 6 中仍然不完美,它对于后退/前进按钮有些奇怪的问题。不过,在 Internet Explorer 7 中运行良好。
惊喜奇怪特性附赠1!在Internet Explorer 6中,每当哈希中有问号时,它会被提取出来放入location.search
属性中!它将从location.hash
属性中删除。但是,如果有真正的查询字符串,location.search
将包含该查询字符串,您只能通过解析location.href
属性来获取整个真正的哈希值。
惊喜奇怪特性附赠2!如果设置了location.search
属性,则任何后续的#
字符都将从location.href
(和location.hash
)属性中删除。在Internet Explorer 6中,这意味着每当路径或哈希中有问号时,您都会遇到此问题。在Internet Explorer 7中,仅当路径中有问号时才会出现此问题。您难道不喜欢Internet Explorer的一致性吗?
惊喜奇怪特性附赠3!如果页面上的另一个元素具有与哈希值相同的ID值,那么该哈希值将完全破坏历史记录。因此,经验法则是避免使用与页面上任何元素相同的ID值作为哈希值。如果哈希值是动态生成的并可能与id冲突,请考虑使用前缀/后缀。
其他浏览器
除非您拥有非同寻常的用户群体,否则不需要支持更多浏览器。未列出在上面的浏览器属于<1%的使用率类别。