javascript - 保留 JavaScript 中哈希/ anchor 更改的历史记录

Question

我目前正在实现一个 JavaScript 库，用于跟踪地址栏中哈希部分的更改历史记录。思路是可以在hash部分保持一个状态，然后使用后退按钮回到之前的状态。

在大多数最近的浏览器中，这是自动的，您只需轮询 location.hash更改属性(在 IE8 中，您甚至不必这样做；您只需将函数附加到 onhashchange 事件。)

我想知道的是 ，有哪些不同的方法来跟踪历史？我已经实现了经过测试可以在 Internet Explorer 6/7/8、Firefox 和 Chrome 中运行的功能，但是其他浏览器呢？以下是我目前保留历史记录的方式:

编辑 :有关各种浏览器的演练，请参阅下面的答案。

Answer 1

首先感谢回答的各位! =)

我现在做了更多的研究，我相信我对我的实现感到满意。以下是我的研究结果。

首先， my finished Hash library 。它是一个没有依赖项的独立库。它有两个函数: Hash.init(callback, iframe) 和 Hash.go(newHash) 。每当散列更改时调用回调函数，新散列作为其第一个参数，并作为其第二个参数的标志，指示回调是由于初始状态( true )还是散列的实际更改( false )而被调用。

Hash.js (MIT license)

我还制作了一个 jQuery 插件以使其更易于使用。还添加了一个全局 hashchange 事件。有关如何使用它，请参阅源代码中的示例。

jquery.hash.js (MIT license)

要查看它们的使用情况，请转到我的 JavaScript“领域”页面:

Blixt's JavaScript realm

浏览器 8

顺利巡航!只需将 onhashchange 事件发送到 window 对象(使用 attachEvent )并在事件处理程序中获取 location.hash 值。

用户点击带有散列的链接，或者您是否以编程方式设置散列都无关紧要；历史保存完好。

Chrome、火狐、Safari 3+、Opera 8+

平稳巡航!只需使用 location.hash 和一个函数轮询对 setInterval 属性的更改。

历史完美运行。对于 Opera，我将 history.navigationMode 设置为 'compatible' 。老实说，我不确定它的作用，我是根据 YUI 代码中的评论推荐的。

Note :Opera 需要一些额外的测试，但到目前为止它对我来说效果很好。

惊喜怪癖奖金! (可以吗？!) 事实证明，Firefox(仅在 3.5+ 中确认)解码了 location.hash 属性，因此这可以触发 hashchange 事件两次(首先是编码版本，然后是未编码版本。)有一个新的我的 Hash.js 库的版本，它通过使用 location.href 属性(由 Aaron Ogle 提供的更改)来考虑这一点。

Internet Explorer 6、7

现在变得更糟了。旧 Internet Explorer 版本中的导航历史忽略哈希更改。为了解决这个问题，普遍接受的解决方案是创建一个 iframe 并将其内容设置为新的哈希值。这会在导航历史记录中创建一个新条目。当用户返回时，这会将 iframe 的内容更改为其先前的内容。通过检测内容的变化，可以获取并设置为active hash。

仍然需要检查对 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% 的使用类别。