Использование истории HTML5 для полной навигации AJAX

Я хотел бы использовать функцию HTML5 window.history для реализации полной навигации AJAX на моем веб-сайте. Я нашел демонстрацию, в которой показана реализация window.history, в которой некоторый контент передается в история, которую можно вызвать и отобразить в текстовом поле. Я хотел бы следовать и расширить этот подход:

  • изменение всего содержимого страницы с помощью AJAX при переходе по ссылкам.
  • перед загрузкой нового контента сохраните все содержимое страницы в истории по текущему URL-адресу.
  • загрузите новый контент, измените URL-адрес и сохраните новый контент в истории.

Таким образом, когда пользователь нажимает кнопки браузера предыдущий и следующий, содержимое страницы будет обновляться соответствующим образом, даже не вызывая HTTP-запрос, что дает пользователю очень плавный AJAX-запрос. на основе опыта.

В: Можете ли вы предвидеть потенциальные проблемы при использовании такого подхода? (в частности, я думаю о памяти браузера, так как сохраняю целые страницы в историю)


url browser html jquery browser-history
person Max    schedule 21.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

  • Да, память будет расти, но в зависимости от широты сайта и сложности исходного кода у вас, вероятно, все будет в порядке.
  • Ваш сайт должен по-прежнему полностью функционировать без Javascript или вызовов AJAX. Вы всегда должны генерировать URL-адреса, которые в конечном итоге будут загружать правильную страницу, чтобы пользователь мог правильно скопировать и вставить ссылку. (Именно здесь спотыкаются многие доморощенные решения.)
  • Используйте Modernizr для проверки поддержки истории, чтобы не сломать что-то в старых браузерах (IE8).
person zim2411    schedule 21.03.2012
comment
-About memory growth: Я сделаю несколько тестов, чтобы посмотреть, как браузеры себя ведут с этим. Возможно, хранение сжатых данных поможет (хотя это перенесет проблему на использование ЦП). -About non-AJAX functionality: конечно. -About Modernizr: есть ли причина, по которой вы рекомендуете эту библиотеку по сравнению с другими библиотеками, такими как, например, jQuery? - person Max; 22.03.2012
comment
Modernizr нужен для того, чтобы ваш сайт работал без загрузки AJAX, а не для замены jQuery. Вы можете проверить поддержку API истории и сделать что-то другое в браузерах, которые его не поддерживают. Вернемся к памяти: я предполагаю, что вы кэшируете исходный HTML-код, который может быть где-то между 1 КБ и, возможно, 50 КБ (или больше) для сложной страницы. Это довольно простой расчет, чтобы определить, как быстро он будет расти. Пару МБ было бы достаточно для настольного браузера, но для мобильных пользователей это может оказаться лишним. - person zim2411; 22.03.2012
comment
согласился с мобильными пользователями: я планирую сделать для них гораздо более легкую версию веб-сайта, которая должна решить эту проблему. - person Max; 23.03.2012