Сохранение состояния страницы Ajax с помощью хэша URL

Question

На моем сайте есть страница с двумя наборами вкладок, ссылка на каждую вкладку основана на ajax, но имеет правильный href на случай, если javascript не включен. Я собираюсь реализовать решение ajax «back-button», используя плагин, такой как jQuery Address.

Моя проблема / путаница с этим решением заключается в том, что содержимое страницы по умолчанию все еще загружается, прежде чем javascript сможет проанализировать хеш и загрузить правильный контент. Если я изначально скрываю содержимое, пользователи, не поддерживающие JavaScript, никогда ничего не увидят. Если я изначально не скрываю содержимое, пользователь на мгновение увидит неправильную страницу, прежде чем она будет обновлена ​​(помимо дополнительных затрат, связанных с первой загрузкой неправильной вкладки, а затем правильной вкладки).

Каковы лучшие / наиболее распространенные подходы к решению этой проблемы?

Спасибо, Брайан

Answer 1

Если вы используете хэши, у вас всегда будет неправильный контент. Чтобы избежать этого, вам нужно использовать решение на стороне сервера с API истории HTML5. Читать дальше

Вы можете использовать: https://github.com/browserstate/ajaxify

И вкладки отображаются на стороне сервера с чем-то вроде if ( $_GET['tab'] === '2' ) // render 2

Answer 2

Я думаю, что это хороший вопрос.Вы пытались использовать тег <noscript> для включения css, который показывает контент, который изначально скрыт для пользователей JS.Примерно так:

<style type="text/css">
  #area-1, #area-2 { display: none; }
</style>

<noscript>
  <style type="text/css">
    #area-1, #area-2 { display: block; }
  </style>
</noscript>

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