保持JavaScript中哈希/锚点更改的历史记录 [英] Keeping history of hash/anchor changes in JavaScript

问题描述

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

I'm currently implementing a JavaScript library that keeps track of the history of changes to the hash part in the address bar. The idea is that you can keep a state in the hash part, and then use the back button to go back to the previous state.

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

In most of the recent browsers, this is automatic and you only have to poll the location.hash property for changes (In IE8 you don't even have to do that; you simply attach a function to the onhashchange event.)

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

What I'm wondering is, what different methods are there to keep track of the history? I've implemented functionality that has been tested to work in Internet Explorer 6/7/8, Firefox and Chrome, but what about other browsers? Here's the ways I currently keep the history:

编辑：请参阅下面的答案，而不是浏览各种浏览器。

Edit: See my answer below instead for a walk-through of the various browsers.

推荐答案

首先，感谢你们的回答！ =）

First of all, thanks to you guys who answered! =)

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

I've now done a lot more research and I believe I'm satisfied with my implementation. Here are the results of my research.

首先，我已完成的哈希库。它是一个没有依赖关系的独立库。它有两个功能： Hash.init（回调，iframe）和 Hash.go（newHash）。每当散列以新散列作为其第一个参数进行更改时调用回调函数，并且作为第二个参数的一个标志指示是否由于初始状态而调用回调（ true ）或哈希的实际更改（ false ）。

First of all, my finished Hash library. It's a stand-alone library with no dependencies. It has two functions: Hash.init(callback, iframe) and Hash.go(newHash). The callback function is called whenever the hash changes with the new hash as its first argument, and as its second argument a flag indicating whether the callback is called due to initial state (true) or an actual change to the hash (false).

Hash.js （麻省理工学院执照）

Hash.js (MIT license)

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

I also made a jQuery plugin for making it easier to use. Adds a global hashchange event as well. See example in source code for how to use it.

jquery.hash.js （麻省理工学院执照）

jquery.hash.js (MIT license)

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

To see them in use, go to my JavaScript "realm" page:

Blixt的JavaScript领域

Internet Explorer 8

Smooooth cruisin'！只需点击一下 onhashchange 事件到窗口对象（使用 attachEvent ）并在事件处理程序中获取 location.hash 值。

Internet Explorer 8

Smooooth cruisin'! Just smack on one o' them onhashchange events to the window object (using attachEvent) and get the location.hash value in the event handler.

它没有如果用户单击带有散列的链接，或者您以编程方式设置散列，则无关紧要;历史是完美的。

It doesn't matter if the user clicks a link with a hash, or if you set the hash programmatically; history is kept perfectly.

光滑的cruisin'！只需使用 setInterval 和函数轮询 location.hash 属性的更改。

Smooth cruisin'! Just poll for changes to the location.hash property using setInterval and a function.

历史非常有效。对于Opera，我将 history.navigationMode 设置为'compatible'。说实话，我不确定它是做什么的，我是根据YUI代码中的评论推荐的。

History works perfectly. For Opera, I set history.navigationMode to 'compatible'. To be honest, I'm not sure what it does, I did it on recommendation from a comment in the YUI code.

注意：Opera需要一些额外的测试，但到目前为止它对我来说还算不错。

Note: Opera needs some additional testing, but it has worked fine for me so far.

惊喜怪癖！ （它可以吗？！）事实证明，Firefox（仅在3.5+中确认）解码 location.hash 属性，因此这可以触发 hashchange 事件两次（首先是编码版本，然后是未编码版本。）我的Hash.js库的新版本通过使用<$ c $将其考虑在内c> location.href 属性（由Aaron Ogle提供的更改。）

Surprise quirk bonus! (Can it be?!) It turns out that Firefox (only confirmed in 3.5+) decodes the location.hash property, so this can trigger a hashchange event twice (first for the encoded version then for the unencoded version.) There is a new version of my Hash.js library that takes this into account by using the location.href property instead (changes provided by Aaron Ogle.)

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

Now it gets nastier. The navigation history in older Internet Explorer versions ignore hash changes. To work around this, the commonly accepted solution is to create an iframe and set its content to the new hash. This creates a new entry in the navigation history. When the user goes back, this changes the content of the iframe to its previous content. By detecting the change of content, you can get it and set it as the active hash.

检查 location.hash的更改属性。但要注意我在下面提到的怪癖。

Checking for changes to the location.hash property is still needed to manual changes to the current address. Beware of the quirks I've mentioned below, though.

虽然这个解决方案似乎是最好的解决方案，但它在Internet Explorer 6中仍然不完美，这是关于后退/前进按钮有点古怪。不过，Internet Explorer 7工作正常。

While this solution seems to be the best one out there, it's still not perfect in Internet Explorer 6, which is a bit quirky about the back/forward buttons. Internet Explorer 7 works fine, though.

惊喜怪癖＃1！在Internet Explorer 6中，每当有问号时哈希，这被提取并放入 location.search 属性！它将从 location.hash 属性中删除。但是，如果有真正的查询字符串， location.search 将包含该字符串，而您只能获得整个查询字符串通过解析 location.href 属性来实现真正的哈希。

Surprise quirk bonus #1! In Internet Explorer 6, whenever there's a question mark in the hash, this gets extracted and put in the location.search property! It is removed from the location.hash property. If there is a real query string, however, location.search will contain that one instead, and you'll only be able to get the whole true hash by parsing the location.href property.

惊喜quirk bonus＃2！如果设置 location.search 属性，任何后续 ＃ 字符将从 location.href 中删除（和 location.hash ）属性。在Internet Explorer 6中，这意味着只要路径或哈希中有问号，您就会遇到这种怪癖。在Internet Explorer 7中，只有在路径中有问号时才会出现此怪癖。你不喜欢Internet Explorer中的一致性吗？

Surprise quirk bonus #2! If the location.search property is set, any subsequent # characters will be removed from the location.href (and location.hash) property. In Internet Explorer 6 this means that whenever there's a question mark in the path or the hash, you'll experience this quirk. In Internet Explorer 7, this quirk only occurs when there's a question mark in the path. Don't you just love the consistency in Internet Explorer?

惊喜怪癖奖励＃3！如果是另一个元素在页面上具有与哈希值相同的id，该哈希将完全搞乱历史记录。因此，经验法则是避免使用与页面上任何元素具有相同ID的哈希值。如果哈希是动态生成的并且可能与ID冲突，请考虑使用前缀/后缀。

Surprise quirk bonus #3! If another element on the page has the same id as the value of a hash, that hash will totally mess up the history. So rule of thumb is to avoid hashes with the same id as any elements on the page. If the hashes are generated dynamically and may collide with ids, consider using a prefix/suffix.

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

Unless you've got an out-of-the-ordinary user base, you won't need to support more browsers. The browsers not listed above are in the <1% usage category.

这篇关于保持JavaScript中哈希/锚点更改的历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！