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

Прежде всего, спасибо вам, ребята, что ответили! знак равно

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

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

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

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

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

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

Сфера JavaScript от Blixt

Интернет Эксплорер 8

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

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

Хром, Фаерфокс, Сафари 3+, Опера 8+

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

История работает идеально. Для Opera я установил history.navigationMode на 'compatible'. Честно говоря, я не уверен, что он делает, я сделал это по рекомендации из комментария в коде YUI.

Примечание. Opera нуждается в дополнительном тестировании, но у меня пока все работает нормально.

Причудливый бонус-сюрприз! (Может быть?!) Оказывается, Firefox (подтверждено только в 3.5+) декодирует свойство location.hash, поэтому это может вызвать событие hashchange дважды (сначала для закодированной версии, а затем для незакодированной версии). — это новая версия моей библиотеки Hash.js, которая учитывает это, используя вместо этого свойство location.href (изменения предоставлены Аароном Оглом).

Интернет Эксплорер 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%.

Основываясь на приложенных вами усилиях, я полагаю, что вы видели Историю браузера YUI. Менеджер, но на всякий случай...

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

Вот что написано об 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's ok, the
* implementation of an equivalent is trivial ... more below

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

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

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

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

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

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

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

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

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

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

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