2013-02-24 7 views
10

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

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

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

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

+2

somesite.com - это существующий домен; не используйте такие домены, если вы действительно не имеете в виду их; example.com зарезервирован для использования в качестве фиктивного примера домена. –

+0

Я заменил example.com – Undistraction

+2

Это сообщение в блоге дает некоторое представление, которое могло бы предложить дальнейшую мысль для решения. Http://jenitennison.com/blog/node/154 – newtriks

ответ

5

Это, как я бы структурировать:

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

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

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

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

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

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

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

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

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

+0

Итак, что вы делаете, когда клиент с включенным Javascript, но браузер, который не поддерживает API-интерфейсы истории, находится на 'example.com/widgets/three'? – Undistraction

+0

Если кто-то с JS, но без истории, посещает example.com/widgets/three, он должен просто получить полную страницу. Что касается структуры вашего сайта, все содержимое yoru должно быть доступно через полные URL-адреса, вы просто загружаете их через ajax. Имеет ли это смысл? –

+0

Можете ли вы уточнить, что вы подразумеваете под «полной страницей»? Вы имеете в виду, что они получают одну страницу так же, как кто-то приземлился на странице с отключенным JavaScript? – Undistraction

0

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

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

+0

Я немного не понимаю ваш ответ. Представляете ли вы, что ему подана незакрепленная отдельная страница? Если это так, вы не поняли вопрос. – Undistraction

+0

Вы добавили часть о многостраничном и одиночном просмотре страниц позже. Как вы должны понимать свои требования, не указав полную информацию? Очевидно, что если вы этого хотите, пользователь должен быть перенаправлен на страницу с поддержкой javascript. Тогда в чем вопрос? –

+0

Нет. Это было с самого начала. Было добавлено уточнение в конце. – Undistraction

2

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

Мне нужен один опыт страницы сайта для всех, кто с Javascript включен

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

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

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

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

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

+0

Это кажется плохим решением для меня, потому что оно включает в себя две отдельные страницы, которые загружаются. Если бы было возможно обнаружить возможности JavaScript-агента пользователя на стороне сервера, было бы хорошо, но учитывая, что перенаправление должно быть на стороне клиента, это неприятно. Не поймите меня неправильно. Скорее всего, вы правы. Я задаю вопрос, потому что думаю, что это интересно, а не потому, что обязательно есть идеальный ответ. Скорее всего, это реальность ситуации. – Undistraction

+0

Я понимаю и обновил свой ответ другим предложением. Я надеюсь, что существуют другие альтернативы, давайте посмотрим, если кто-нибудь придумает что-то еще. – bfavaretto

+0

@Pedr На ваших якорных hrefs на самом деле есть хеш-фрагменты? Я думаю о другом варианте (который я сейчас использую на сайте, который я разрабатываю, на самом деле). Если ваши ссылки указывают на такие вещи, как '/ widgets/one', вы можете вручную добавить хэш в браузер с помощью js, если он доступен. Тогда обе версии страницы будут выглядеть одинаково, хотя для загрузки контента следует использовать js/ajax, в то время как другие обычно запрашивают новые URL-адреса. На самом деле это лучший вариант. – bfavaretto

0

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

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

example.com/widgets#one 

будет ссылкой на элемент с идентификатором «один»

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^