Multipage vs Single Page и ненавязчивый Javascript

У меня есть раздел сайта с несколькими категориями Widget. Существует меню с названием каждой категории. Для всех, у кого включен Javascript, нажатие категории показывает содержимое категории на странице. Они могут щелкать между категориями по своему усмотрению, наблюдая, как DOM обновляется по мере необходимости. URL-адрес также обновляется с использованием стандартного хэша /hashbang (если мы используем Google). Поэтому для тех, кто приземляется на example.com/widgets, они могут перемещаться по example.com/widgets#one, example.com/widgets#two, example.com/widgets#three и т.д.

Однако, чтобы поддерживать пользовательские агенты без включенного Javascript, следующая одна из этих категорий ссылок должна загружать новую страницу с отображаемой категорией, поэтому для тех, у кого нет javascript, они будут перемещаться в example.com/widgets/one, example.com/widgets/two, example.com/widgets/three и т.д.

Мой вопрос: Что должно произойти, если кто-то с включенным Javascript приземляется на один из этих URL-адресов? Что нужно, если кто-то с Javascript включен, при приземлении на example.com/widgets/one например? Если они будут перенаправлены на example.com/widgets#one?

Обратите внимание, что для любого, у кого включен Javascript, мне нужен сайт для одной страницы, но мне нужен многостраничный сайт для пользовательского агента без JavaScript. Любой ответ, который не затрагивает этот факт, не отвечает на вопрос. Меня не интересуют достоинства или проблемы hashbangs или одностраничных сайтов и многостраничных сайтов.

Ответ 1

Вот как я его структурировал:

Используйте HistoryJS для управления URL-адресом. JS pushstate браузеры получили полные правильные URL-адреса, а JS-браузеры без pushstate получили хешированные URL-адреса. Пользователи, не являющиеся JS, перешли на полный URL как обычно при перезагрузке страницы.

Когда пользователь нажимает ссылку:

Если у них есть JS: Все клики на другие страницы обрабатываются функцией, которая предотвращает действие по умолчанию, захватывает HREF и передает URL-адрес в запрос ajax и одновременно обновляет URL-адрес. HTTP-ответ для этого ajax-запроса затем анализируется и затем загружается в область содержимого.

Не JS: Страница обновляется как обычно и загружает весь документ.

При загрузке страницы:

С помощью JS: Прикрепите обработчик событий ко всем вашим ссылкам, чтобы предотвратить по умолчанию, чтобы их href обрабатывался через Ajax.

Без JS: Ничего. Разрешить якоря работать как обычно.

Я думаю, что вы обязательно должны иметь весь свой контент, доступный через полный правильный URL-адрес и загружая его через ajax, а затем обновляя URL-адрес, чтобы отобразить адрес, из которого вы получили свой контент. Таким образом, когда JS не работает, вам ничего не нужно менять.

Это то, что вы имеете в виду?

Ответ 2

По-видимому, ваш вопрос уже содержит ответ. Вы говорите:

Мне нужен сайт для одного сайта для любого, у кого включен Javascript

а затем спросите:

Что нужно, чтобы кто-то с включенным Javascript был представлен при приземлении на example.com/widgets/one например? Если они будут перенаправлены на example.com/widgets#one?

Я бы сказал да, они должны быть перенаправлены. Я не вижу другого варианта, учитывая ваши требования (и тот факт, что информация о возможностях JavaScript и хэш-фрагменте URL-адреса недоступна на стороне сервера).

Если вы можете немного смягчить требования, я вижу другой вариант. Помните, когда сеть была заполнена наборами фреймов, и мы приземлились на определенный кадр через AltaVista (Google еще не был!) Поиск? Было общеизвестно, что заголовок говорит о том, что страница должна отображаться как кадр, а также ссылка, которая приведет пользователя к версии набора фреймов.

Вы можете сделать что-то похожее: при наличии сценариев обнаружите, что вы находитесь в example.com/widgets/one и добавляете ссылку на одностраничную версию. Я знаю, что это не идеальный, но это лучше, чем ничего, и, возможно, лучше, чем неприятная перенаправление на стороне клиента.

Ответ 3

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

Но что произойдет, если пользователь приземлится на example.com/widgets#one? В этом случае вам нужно будет настроить автоматическое перенаправление на example.com/widgets/one. Это можно сделать, проверив, включен ли javascript в событии onload и перенаправляется на соответствующую страницу.

Ответ 4

Одним из способов разработки таких страниц является разработка без javascript.

Вы можете использовать привязки на странице, чтобы:

example.com/widgets#one

Будет ссылка на элемент с id 'one'

Как только ваша страница работает без javascript, вы добавляете слой javascript. Вы можете предотвратить ссылки, за которыми следует использование event.preventDefault.

(https://developer.mozilla.org/fr/docs/DOM/event.preventDefault), затем добавьте требуемую функциональность javascript.