我目前正在实现一个JavaScript库,用于跟踪地址栏中哈希部分的更改历史记录.这个想法是你可以在哈希部分保持一个状态,然后使用后退按钮返回到先前的状态.
在大多数最近的浏览器中,这是自动的,您只需轮询location.hash属性以进行更改(在IE8中,您甚至不必这样做;您只需将一个函数附加到onhashchange事件中.)
我想知道的是,有哪些不同的方法可以追踪历史？我已经实现了经过测试可以在Internet Explorer 6/7/8,Firefox和Chrome中运行的功能,但其他浏览器呢？以下是我目前保留历史的方式:
编辑:请参阅下面的答案,而不是浏览各种浏览器.
首先,感谢你们的回答!=)
我现在做了很多研究,我相信我对我的实施感到满意.以下是我的研究结果.
首先,我完成了Hash库.它是一个没有依赖关系的独立库.它有两个功能:Hash.init(callback, iframe)和Hash.go(newHash).每当散列以新散列作为其第一个参数进行更改时调用回调函数,并且作为其第二个参数,指示是否由于初始状态(true)或对散列(false)的实际更改而调用回调.
Hash.js(麻省理工学院执照)
我还制作了一个jQuery插件,使其更易于使用.还添加了一个全局hashchange事件.请参阅源代码中的示例以了解如何使用它.
jquery.hash.js(麻省理工学院执照)
要查看它们的使用情况,请转到我的JavaScript"领域"页面:
Blixt的JavaScript领域
Smooooth cruisin'!只需将其中的一个onhashchange事件发送到window对象(使用attachEvent),然后location.hash在事件处理程序中获取值.
用户是否单击带有哈希的链接,或者以编程方式设置哈希值无关紧要; 历史保持完美.
光滑的cruisin'!只需location.hash使用setInterval和函数轮询属性的更改.
历史很完美.对于Opera,我设置history.navigationMode为'compatible'.说实话,我不确定它是做什么的,我是根据YUI代码中的评论推荐的.
注意:Opera需要一些额外的测试,但到目前为止它对我来说还算合适.
惊喜怪癖奖金!(它可以吗？!)事实证明,Firefox(仅在3.5+中确认)解码该location.hash属性,因此这可以触发一次hashchange事件两次(首先是编码版本然后是未编码的版本.)有一个新版本的我Hash.js库通过使用location.href属性来考虑这一点(由Aaron Ogle提供的更改.)
现在它变得更糟糕了.较旧的Internet Explorer版本中的导航历史记录忽略了哈希更改.要解决此问题,通常接受的解决方案是创建一个iframe并将其内容设置为新哈希.这将在导航历史记录中创建一个新条目.当用户返回时,这会将内容更改iframe为其先前的内容.通过检测内容的更改,您可以获取它并将其设置为活动哈希.
location.hash手动更改当前地址仍需要检查属性的更改.但要注意我在下面提到的怪癖.
虽然这个解决方案似乎是最好的解决方案,但它仍然不是完美的Internet Explorer 6,这对后退/前进按钮有点古怪.不过,Internet Explorer 7工作正常.
惊喜quirk奖金#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中的一致性吗？
惊喜quirk奖金#3!如果页面上的另一个元素具有与哈希值相同的id,则该哈希将完全弄乱历史记录.因此,经验法则是避免使用与页面上任何元素具有相同ID的哈希值.如果哈希是动态生成的并且可能与id冲突,请考虑使用前缀/后缀.
除非你有一个不同寻常的用户群,否则你不需要支持更多的浏览器.上面未列出的浏览器属于<1%使用类别.
京公网安备 11010802040832号 | 京ICP备19059560号-6 