Разработка веб-сайта как с поддержкой, так и без поддержки сценариев JavaScript.

StackOverflow https://stackoverflow.com/questions/1284899

Вопрос

Хорошо, я знаю, что для вашего сайта важно нормально работать с отключенным JavaScript.

По моему мнению, один из способов начать думать о том, как создавать такие веб-сайты, — это обнаружить JavaScript на домашней странице и, если он не включен, перенаправить на другую версию веб-сайта, которая не использует код JavaScript и работает с чистым HTML (например, Gmail).

Другой метод, который я имею в виду, — это, например, подумать о X (кнопке закрытия) в диалоговом окне на веб-странице.Что, если нажатие X без какого-либо вмешательства Javascript приведет к отправке запроса на сервер, и на стороне сервера мы скроем этот диалог при следующем рендеринге страницы, а также мы привяжем функцию Javascript для щелчка по ссылке и в случае если включен JavaScript, диалоговое окно мгновенно скроется.

Что ты думаешь об этом?Как бы вы разработали веб-сайт, который бы поддерживал и то, и другое?

Это было полезно?

Решение

Один из способов справиться с этим заключается в следующем:

  • Сначала создайте сайт без какого-либо JavaScript.
  • Затем, когда все заработает, добавьте улучшения JavaScript, где это возможно.

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

Разумеется, вы можете сделать то же самое с CSS — есть даже один "CSS голый день" каждый день, показывая, как выглядят веб-сайты без CSS ^^


Один пример?

  • У вас есть стандартная HTML-форма, которая отправляет данные POST на ваш сервер при отправке, а при повторном создании страницы сервером отображается сообщение типа «спасибо за подписку».
  • Затем вы добавляете некоторые элементы JS + Ajax:вместо перезагрузки всей страницы при отправке формы вы выполняете запрос Ajax, который отправляет только данные;и в ответ отображает «спасибо за подписку» без перезагрузки страницы

В этом случае, если JavaScript отключен, первый «стандартный» способ работы по-прежнему работает.

Это (часть) того, что называется Прогрессивное улучшение

Другие советы

Обычный метод - это то, что называется прогрессивное улучшение.

По сути, вы берете простой HTML-сайт с обычными формами.
Следующее улучшение — это CSS, благодаря которому он будет выглядеть лучше.
Затем вы можете улучшить его с помощью Javascript — добавлять или удалять элементы, добавлять эффекты и так далее.

Базовый HTML всегда доступен для старых браузеров (или, например, с блокировщиками скриптов).

Например, форма для публикации комментария может выглядеть так:

<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>

Затем вы можете улучшить его с помощью JavaScript, чтобы сделать его AJAXy.

$('#myForm').submit(...);

В идеале обратный вызов AJAX должен использовать тот же код, что и post-comment.php — либо путем вызова того же файла, либо через include, то вам не придется дублировать код.

С точки зрения, не важно, чтобы ваш сайт работал с отключенным JavaScript.Люди, которые отключают JavaScript, — это люди, которые хотят внести ошибки в ваш сайт, они не заслуживают правильной навигации по нему.Не тратьте на них свои усилия.Все знают, что в Интернете невозможно пользоваться без JavaScript.

Единственное, с чем вам следует быть осторожным, это с вашими формами:Никогда не доверяйте фильтрам в JavaScript, Всегда фильтруйте его снова на стороне сервера, ВСЕГДА!

Используйте Прогрессивное улучшение, изучайте jquery чтобы понять это.Потребуется некоторое время, пока вы соберетесь с мыслями.Например, ваша идея:

чтобы обнаружить javascript на домашней странице и, если он не включен, перенаправить на другую версию веб-сайта, которая использует не javascript-код и работает с чистым html

как бы вы определили, отключен ли javascript?очевидно, не с помощью javascript...

ты не о том думаешь:самая базовая версия должна быть версией по умолчанию, а затем, если вы обнаружите более продвинутые возможности, вы сможете их использовать.

Старайтесь избегать отдельных версий для разных боузеров / возможностей как можно дольше.Требуется так много работы, чтобы поддерживать все версии в актуальном состоянии.

Несколько хороших ресурсов, которые помогут вам начать:

Лучший способ — создать страницу, которая будет адекватно работать без JS.Затем добавьте блок <script> внизу раздела <body> с таким кодом:

window.onload = function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    document.getElementById('someInputField').onchange = function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
    }
}

Изучите jQuery Примеры.Они показывают много подобных вещей.Это называется «ненавязчивый JavaScript».Google для этого, чтобы найти больше примеров.

РЕДАКТИРОВАТЬ:Версия jQuery выше:

$(document).ready(function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    $('#someInputField').change(function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
   });
});

Я добавил это только для того, чтобы показать меньшую детализацию jQuery по сравнению с JQuery.стандартная манипуляция с DOM.Существует небольшая разница между window.onload и document.ready, обсуждаемая в документации и руководствах по jQuery.

То, к чему вы стремитесь, это прогрессивное улучшение.Я бы сначала спроектировал сайт без JavaScript, а когда он заработает, начал добавлять события JavaScript через такую ​​библиотеку, как jQuery, чтобы поведение сайта было полностью отделено от представления.Таким образом, вы можете обеспечить более высокий уровень функциональности и доработки для тех, у кого в браузерах включен JavaScript, и для тех, у кого нет.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top