Сохранение истории изменений хэша/якоря в JavaScript

В настоящее время я реализую библиотеку JavaScript, которая отслеживает историю изменений хэш-части в адресной строке. Идея состоит в том, что вы можете сохранить состояние в хеш-части, а затем использовать кнопку "Назад", чтобы вернуться в предыдущее состояние.

В большинстве последних браузеров это автоматически, и вам нужно только опросить свойство location.hash для изменений (в IE8 вам даже не нужно это делать: вы просто присоединяете функцию к событию onhashchange.)

Мне интересно,, какие методы существуют для отслеживания истории? Я реализовал функциональность, которая была протестирована для работы в Internet Explorer 6/7/8, Firefox и Chrome, но как насчет других браузеров? Вот способы, которыми я в настоящее время храню историю:

Изменить. См. ниже мой ответ для прохода различных браузеров.

Ответ 1

Прежде всего, спасибо вам, ребята, которые ответили! =)

Теперь я провел намного больше исследований, и я уверен, что доволен своей реализацией. Вот результаты моих исследований.

Прежде всего, моя законченная библиотека Hash. Это автономная библиотека без зависимостей. Он имеет две функции: Hash.init(callback, iframe) и Hash.go(newHash). Функция обратного вызова вызывается всякий раз, когда хеш изменяется с новым хешем в качестве первого аргумента, а вторым аргументом является флаг, указывающий, вызван ли обратный вызов из-за начального состояния (true) или фактическое изменение хэша (false).

Hash.js (лицензия MIT)

Я также создал плагин jQuery для упрощения его использования. Добавляет глобальное событие hashchange. См. Пример в исходном коде, как его использовать.

jquery.hash.js (лицензия MIT)

Чтобы увидеть их в использовании, перейдите на страницу JavaScript "realm":

Blixt JavaScript realm

Internet Explorer 8

Smooooth cruisin '! Просто нанесите один из них onhashchange событий на объект window (используя attachEvent) и получите значение location.hash в обработчике событий.

Не имеет значения, будет ли пользователь щелкать ссылку с хешем, или если вы установите хеш программно; история прекрасно сохранилась.

Chrome, Firefox, Safari 3+, Opera 8 +

Гладкий круиз! Просто выполните опрос об изменениях в свойстве location.hash с помощью setInterval и функции.

История отлично работает. Для 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! Если другой элемент на странице имеет тот же идентификатор, что и значение хэша, этот хеш полностью испортит историю. Таким образом, эмпирическое правило заключается в том, чтобы избежать хэшей с тем же идентификатором, что и любые элементы на странице. Если хэши генерируются динамически и могут сталкиваться с идентификаторами, рассмотрите использование префикса/суффикса.

Другие браузеры

Если у вас нет привычной базы пользователей, вам не нужно будет поддерживать больше браузеров. Браузеры, не перечисленные выше, находятся в категории использования < 1%.

Ответ 2

Основываясь на усилиях, которые вы вложили в это, я бы предположил, что вы видели YUI Browser History Manager, но просто в случае...

Они дают хорошую запись об их реализации, и я считаю их исходный код очень удобочитаемым.

Вот что он говорит о Opera

* 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 ok, the
* implementation of an equivalent is trivial ... more below

Поиск источника Я нашел некоторые варианты для Safari 1.x и 2.0. Похоже, вам это интересно.

Надеюсь, что это поможет.

Ответ 3

Я не уверен, что полностью понимаю ваши потребности, но я использовал библиотеку Really Simple History (http://code.google.com/p/reallysimplehistory/) для реализации чего-то аналогичный. Вы можете увидеть это здесь: http://whiteoak.sourceforge.net/

Ответ 4

Я не видел ничего упомянутого о том, что я собираюсь сказать где угодно, поэтому я думал, что поделюсь и посмотрю, насколько это общеизвестно.

В IE (проверяется только в IE7) история с хешем работает правильно, когда на экране есть элемент страницы с идентификатором, равным хешу. Например, подумайте о содержании (TOC) на странице wiki. Каждая ссылка в TOC связывается с хэшем элемента id или имени привязки где-то на странице:

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

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

Итак, когда щелкнули SampleHeaderLink, по умолчанию для браузера IE необходимо перейти к SampleHeader и зарегистрировать состояние в истории. Использование кнопки "Назад" и "Вперед" работает так, как ожидалось.

Однако, если на странице не существует DivX SampleHeader, браузер регистрирует только URL-адрес, но не создает для него новое состояние.

Опять же, это проверяется только в IE7. И я не знаю, насколько общепринятой является эта информация, но я никогда не обнаружил ничего связанного, когда я просматривал эту проблему в своем собственном приложении.

Ответ 5

GWT обеспечивает управление историей. Он также является неотъемлемой частью их структуры MVP. Они также улучшили API истории с местами и мероприятиями.