Разработка веб-сайта как с поддержкой, так и без поддержки сценариев JavaScript.
-
18-09-2019 - |
Вопрос
Хорошо, я знаю, что для вашего сайта важно нормально работать с отключенным 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, и для тех, у кого нет.