Многостраничный против одностраничного и ненавязчивого Javascript

У меня есть раздел сайта с несколькими категориями виджетов. Существует меню с названием каждой категории. Для тех, у кого включен Javascript, щелчок по категории показывает содержимое категории на странице. Они могут переключаться между категориями по своему желанию, видя, как DOM обновляется по мере необходимости. URL-адрес также обновляется с использованием стандартного хэша/хэш-банга (если мы дружественны к 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. Любой ответ, который не касается этого факта, не отвечает на вопрос. Меня не интересуют достоинства или проблемы хэш-бангов или одностраничных сайтов по сравнению с многостраничными сайтами.


javascript navigation html ujs unobtrusive-javascript
person Undistraction    schedule 24.02.2013    source источник
comment
somesite.com — существующий домен; не используйте такие домены, если вы действительно их не имеете в виду; example.com зарезервирован для использования в качестве фиктивного примера домена.   -  person Jukka K. Korpela    schedule 24.02.2013
comment
Я заменил на example.com   -  person Undistraction    schedule 24.02.2013
comment
Этот пост в блоге дает некоторую информацию, которая может предложить дальнейшие размышления о решении jenitennison.com/blog/node/154   -  person newtriks    schedule 24.02.2013
comment
@newtriks Спасибо. Это был отличный пост.   -  person Undistraction    schedule 24.02.2013
comment
Я думаю, что главный вопрос должен заключаться в следующем: Что произойдет, если кто-то с отключенным JS попадет на example.com/widgets#two?   -  person Bergi    schedule 27.02.2013
comment
Они попадут на корневую страницу. Я не вижу другого способа обойти это, кроме как не использовать хэши, которые затем наносят ущерб любым пользователям IE9 или меньше.   -  person Undistraction    schedule 27.02.2013
comment
@Pedr, похоже, вы ищете кого-то, кто скажет вам перенаправить их на страницу javascript, поскольку вы прокомментировали отклонение противоположных предложений. Я раскрою это для вас по-другому, ваш вопрос не является сценарием на правильно закодированном веб-сайте с правильным обнаружением и перенаправлением.   -  person RandomUs1r    schedule 27.02.2013
comment
@ Syn123 Итак, нарисуйте для меня картину «правильно закодированного веб-сайта с правильным обнаружением и перенаправлением», который удовлетворяет моим параметрам. Я отклонил этот ответ, потому что он не решает мой вопрос. Я хочу, чтобы каждый, кто приедет с включенным Javascript, получил одностраничный интерфейс, где он мог бы переключаться между страницами без полной загрузки страницы. Я не ищу кого-то, чтобы сказать мне что-то конкретное. Меня интересует обсуждение сценария и подходов к его решению.   -  person Undistraction    schedule 27.02.2013
comment
почему пользователь javascript вообще может быть перенаправлен на example.com/widgets/one?   -  person RandomUs1r    schedule 27.02.2013
comment
@Syn123 Syn123 Вполне возможно, что пользователь, не использующий javascript, может передать ссылку на example.com/widgets/one, по которой затем может перейти пользователь с включенным javascript. И, конечно же, любой, кто переходит по ссылкам, проиндексированным Google.   -  person Undistraction    schedule 27.02.2013
comment
Я думаю, поэтому очевидное решение состоит в том, чтобы сделать перенаправление со страницы, отличной от js, на страницу js с обнаружением, но... почему бы вам не закодировать все на 1 странице и представить ее пользователям js через тег ‹script › и то же самое для пользователей, не использующих js, с помощью тега ‹noscript›? Не уверен, зачем вам нужны две страницы для этого, помимо более чистого кода, но если вы беспокоитесь о том, чтобы связать пользователей js со страницами, отличными от js, этот подход с одной страницей может быть подходящим.   -  person RandomUs1r    schedule 28.02.2013
comment
@ Syn123 Одностраничный сайт будет бесполезен для поисковых пауков и для людей без включенного JavaScript, однако он будет намного удобнее для всех, у кого включен Jab = vaScript, поэтому мне нужно найти способ поддерживать оба.   -  person Undistraction    schedule 01.03.2013
comment
Хорошо, я сдаюсь, лол, я рекомендую взять урок о том, как работает Интернет, мы здесь ходим по кругу. Совет: алгоритмы поиска не учитывают дублированный контент.   -  person RandomUs1r    schedule 01.03.2013
comment
@ Syn123 Может быть, вы могли бы прислать мне список курсов, которые вы прошли, чтобы я мог быть уверен, что не пойду ни на один из них. Вы когда-нибудь думали о создании блога или, может быть, о написании книги, чтобы собрать воедино еще «советы профессионалов», которые у вас могут быть?   -  person Undistraction    schedule 01.03.2013
comment
@ Syn123 Syn123 Отлично, ну, эта ссылка все прояснила бы. Если бы я задал совсем другой вопрос. Может быть, вы могли бы просто оставить еще несколько «советов для профессионалов» в этих комментариях. Я почти уверен, что он быстро станет популярным ресурсом для таких профессиональных программистов, как вы.   -  person Undistraction    schedule 02.03.2013

Ответы (4)


arrow_upward
6
arrow_downward

Вот как я бы это структурировал:

Используйте 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 не работает, вам не нужно ничего менять.

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

person Gary Stevens    schedule 03.03.2013
comment
Итак, что вы делаете, когда клиент с включенным Javascript, но браузер, который не поддерживает API истории, попадает на example.com/widgets/three? - person Undistraction; 08.03.2013
comment
Если кто-то с JS, но без состояния истории посещает example.com/widgets/three, он должен просто получить полную страницу. Что касается структуры вашего сайта, весь ваш контент должен быть доступен через полные URL-адреса, вы просто выбираете загрузку их через ajax. Имеет ли это смысл? - person Gary Stevens; 12.03.2013
comment
Можете ли вы уточнить, что вы подразумеваете под «полной страницей»? Вы имеете в виду, что они получают одну страницу так же, как кто-то переходит на страницу с отключенным JavaScript? - person Undistraction; 13.03.2013
comment
Да, они получили бы то же самое, как если бы они приземлились на него без JavaScript. - person Gary Stevens; 13.03.2013
comment
Понимаешь, мне это кажется отговоркой. Именно поэтому я разместил этот вопрос. Все ссылки, которые Google проиндексирует, будут вести на эти полные страницы, поэтому все люди, которые перейдут по этим ссылкам с включенным JavaScript, получат дерьмовый опыт, который получили бы люди без JavaScript. Не поймите меня неправильно. Похоже, что так поступают многие люди, но это означает, что единственные люди, которые получают современный одностраничный опыт с богатым JavaScript, — это те, кто случайно попадает на страницу индекса. - person Undistraction; 13.03.2013
comment
Я не это имею в виду. Когда пользователь попадает на ЛЮБУЮ страницу, у вас должен быть какой-то JS, который запускается и настраивает ваш одностраничный опыт. Вы не должны делать это ТОЛЬКО на главной странице. В противном случае вы ограничиваете свой опыт людьми, которые первыми посещают главную страницу. Если у вас есть JS, и вы попадаете на любую страницу, ваше приложение должно быть в состоянии настроить себя. Я надеюсь, что это имеет смысл, это большая тема, и ее очень трудно передать через комментарии. - person Gary Stevens; 15.03.2013
comment
Конечно. Некоторые аспекты интернет-опыта смехотворно устарели. В мире, где мы можем общаться с астронавтами практически в реальном времени, мы ведем текстовую беседу с интервалом в 1 день между ответами. Это как играть в шахматы по почте или разговаривать с кем-то на Марсе ;) Имеет смысл. Я думаю, что мы пришли из одного и того же места. - person Undistraction; 15.03.2013
comment
Абсолютно. По сути, я думаю, что все ваши страницы должны иметь возможность загружать любые другие страницы через ajax в контейнер. В первый раз, когда вы попадаете на этот сайт, выполняется какая-то настройка для инициализации HistoryJS, связывания обработчиков событий и т. д., но после этого сайт действует как одностраничное приложение. Надеюсь, вы решите проблему, и я бы хотел, чтобы у меня было время/ресурсы, чтобы собрать лучший пример. - person Gary Stevens; 16.03.2013

arrow_upward
2
arrow_downward

Судя по всему, в вашем вопросе уже есть ответ. Ты говоришь:

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

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

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

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

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

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

person bfavaretto    schedule 27.02.2013
comment
Это кажется мне плохим решением, потому что оно включает загрузку двух отдельных страниц. Если бы можно было обнаружить возможности JavaScript пользовательского агента на стороне сервера, это было бы хорошо, но, учитывая, что перенаправление должно быть на стороне клиента, это неприятно. Не поймите меня неправильно. Вы, скорее всего, правы. Я задаю вопрос, потому что считаю его интересным, а не потому, что на него обязательно есть идеальный ответ. Вполне вероятно, что это реальность ситуации. - person Undistraction; 27.02.2013
comment
Я понимаю и обновил свой ответ другим предложением. Я надеюсь, что существуют другие альтернативы, давайте посмотрим, если кто-нибудь придумает что-то еще. - person bfavaretto; 27.02.2013
comment
@Pedr Действительно ли ваши якорные ссылки включают хэш-фрагменты? Я думаю о другом варианте (тот, который я сейчас использую на сайте, который я разрабатываю, на самом деле). Если ваши ссылки указывают на такие вещи, как /widgets/one, вы можете вручную добавить хэш в браузер с помощью js, когда он доступен. Тогда обе версии страницы будут выглядеть одинаково, хотя одна будет использовать js/ajax для загрузки контента, а другая обычно будет запрашивать новые URL-адреса. Это может быть лучшим вариантом, на самом деле. - person bfavaretto; 27.02.2013
comment
Я планирую использовать библиотеку, которая использует History API и возвращается к использованию хэшей, только если браузер не поддерживает (IE8 и IE9). Так что, по крайней мере, этим браузерам потребуется перенаправление на стороне клиента обратно на example.com/widgets. Для браузеров, поддерживающих History API, переход на example.com/widgets/one не будет отличаться с точки зрения URL-адреса, чем если бы они перешли на example.com/widgets и перешли на example.com/widgets/one. - person Undistraction; 01.03.2013

arrow_upward
0
arrow_downward

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

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

person Varun Achar    schedule 27.02.2013
comment
Мне немного непонятен ваш ответ. Вы предлагаете, чтобы ему подали нерасширенную единственную страницу? Если да, то вы не поняли вопроса. - person Undistraction; 27.02.2013
comment
Позже вы добавили часть о многостраничном и одностраничном опыте. Как можно понять ваши требования, если вы не предоставите полную информацию? Очевидно, что если это то, чего вы хотите, пользователь должен быть перенаправлен на страницу с включенным javascript. В чем тогда вопрос? - person Varun Achar; 28.02.2013
comment
Нет. Это было с самого начала. В конце добавлено уточнение. - person Undistraction; 28.02.2013

arrow_upward
0
arrow_downward

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

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

example.com/widgets#one

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

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

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

person Bertrand    schedule 03.03.2013