在javascript中保存哈希/锚更改的历史记录

首先,感谢你们的回答!=)

我现在做了很多研究,我相信我对我的实现感到满意。这是我的研究结果。

首先, my finished Hash library . 它是一个独立的库,没有依赖关系。它有两个功能: Hash.init(callback, iframe) 和 Hash.go(newHash) .每当散列以新散列作为第一个参数进行更改时,调用回调函数;当散列以新散列作为第二个参数时,调用一个标志,指示是否由于初始状态而调用回调( true )或者对散列值的实际更改( false )

Hash.js (麻省理工学院执照)

我还做了一个jquery插件,使它更容易使用。添加全局 hashchange 事件也是如此。有关如何使用它的信息,请参见源代码中的示例。

jquery.hash.js (麻省理工学院执照)

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

Blixt's JavaScript realm

Internet Explorer 8

冰沙巡洋舰!打他们一个 onhashchange 事件到 window 对象(使用) attachEvent 然后得到 location.hash 事件处理程序中的值。

不管是用户单击带有哈希的链接,还是您以编程方式设置哈希;历史记录都保存得很好。

Chrome、Firefox、Safari 3+、Opera 8+

顺利巡游!只需轮询更改 位置散列 使用性能 setInterval 和一个函数。

历史是完美的。为歌剧,我设置 history.navigationMode 到 'compatible' . 老实说,我不知道它做了什么,我是根据YUI代码中的一条评论推荐的。

注释 :Opera需要一些额外的测试,但到目前为止它对我来说工作得很好。

惊喜怪癖奖金!(可以吗?!) 结果证明,firefox(仅在3.5+中确认)解码 位置散列 属性,这样可以触发 哈希变换 事件两次(首先是编码版本,然后是未编码版本)。我的hash.js库有一个新版本,通过使用 location.href 属性(由Aaron Ogle提供更改。)

Internet Explorer 6、7

现在情况变得更糟了。旧Internet Explorer版本中的导航历史记录忽略哈希更改。为了解决这个问题,通常接受的解决方案是创建一个 iframe 并将其内容设置为新哈希。这将在导航历史记录中创建一个新条目。当用户返回时,这将更改 伊夫拉姆 它以前的内容。通过检测内容的更改,可以获取并将其设置为活动哈希。

正在检查对的更改 位置散列 属性仍然需要手动更改当前地址。不过,要小心我下面提到的怪癖。

虽然这个解决方案看起来是最好的,但它在Internet Explorer 6中仍然不完美,因为它在后退/前进按钮方面有点古怪。不过,Internet Explorer 7工作正常。

惊喜惊喜奖金1! 在Internet Explorer 6中,只要哈希中有问号,就会提取并放入 location.search 财产!它从 位置散列 财产。但是,如果有一个真正的查询字符串, 位置搜索 将包含该哈希,并且您只能通过分析 地点 财产。

惊喜惊喜奖金2! 如果 位置搜索 属性已设置,任何后续属性 # 将从中删除字符 地点 (和) 位置散列 )属性。在InternetExplorer6中,这意味着每当路径或哈希中有问号时,您都会遇到这种怪癖。在InternetExplorer7中,只有在路径中有问号时才会出现这种奇怪现象。你不喜欢Internet Explorer的一致性吗?

惊喜惊喜奖金3! 如果页面上的另一个元素与哈希值具有相同的ID,则该哈希将彻底破坏历史记录。所以经验法则是避免散列与页面上的任何元素具有相同的ID。如果散列是动态生成的,并且可能与ID冲突,请考虑使用前缀/后缀。

其他浏览器

除非你有一个非常普通的用户群,否则你不需要支持更多的浏览器。上面未列出的浏览器属于<1%使用率类别。

基于你所付出的努力,我认为你已经看到了 YUI Browser History Manager 但以防万一…

它们给出了一个很好的实现描述,我发现它们的源代码非常可读。

这就是它所说的歌剧

* location.hash is a bit buggy on Opera. I have seen instances where
* navigating the history using the back/forward buttons, and hence
* changing the URL, would not change location.hash. That's ok, the
* implementation of an equivalent is trivial ... more below

在搜索源代码时,我还找到了一些Safari 1.x&2.0的住宿条件。看来你会对它感兴趣的。

希望有帮助。

我不确定我完全理解你的需要,但我使用了非常简单的历史图书馆( http://code.google.com/p/reallysimplehistory/ )实现类似的东西。你可以在这里看到: http://whiteoak.sourceforge.net/

我在任何地方都没有看到任何关于我将要说的话的提及,所以我想我会分享并看看这是多么的常识。

在IE中(仅在IE7中验证),当屏幕上有一个ID等于哈希的页面元素时,具有哈希的历史可以正常工作。例如,想想wiki页面上的目录(toc)。TOC中的每个链接都链接到页面上某个ID或锚定名称元素的哈希:

<div id="TOC">
<a id="SampleHeaderLink" href="#SampleHeader">Sample Header</a>
</div>

<h2 id="SampleHeader">Sample Header</a>

因此,单击sampleHeaderLink时,IE浏览器的默认设置是导航到sampleHeader并在历史记录中注册状态。使用后退按钮和前进按钮按预期工作。

但是,如果页面上不存在sampleheader div,浏览器只注册URL更改,但不为其创建新状态。

同样,这仅在IE7中得到验证。我不知道这些信息有多普遍,但是当我在自己的应用程序中浏览以解决这个问题时,我从未发现任何相关的信息。

GWT提供历史管理。它也是他们MVP框架的一个组成部分。他们还通过地点和活动增强了历史API。