Что делать если JavaScript отключен

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

Конечно вебмастеру в таком случае предстоит ответить на вопрос «А что увидит посетитель, если у него по каким-то причинам не работает javascript?». На этот счёт есть два основных мнения. Первое — пользователь сам виноват в том, что отключает возможности своего браузера и, соответственно, работа сайта при таком раскладе полностью проблема юзера. Второе мнение — пользователь должен «пострадать» минимально. Основной функционал должен быть работоспособным в любом случае, независимо от javascript.

Если с приверженцами первого мнения всё понятно (они пишут сайты, не обращая внимания на процент сёрферов с отключённым javascript — которые зайдут на страницу и не смогут перемещаться по сайту либо ощутят другой явный дискомфорт), то вторые всячески стараются реализовать функции для обоих вариантов (с включённым и выключенным javascript).

Это «лишний» код — могут возразить радикальные вебмастера, приверженцы плевания на своих пользователей. Да, но ведь удобство пользователя превыше всего. Сайт то мы делаем не для себя, а для посетителя. Поэтому просто обязаны удовлетворить всех (ну, или почти всех).

Веб разработчик обязан сделать так, чтобы посетитель увидел и смог воспользоваться сайтом независимо от своего браузера, каких-то предпочтений (не самых извращённых конечно) и отсутствия технического образования.

Это касается отключённого javascript, устаревшего браузера Internet Explorer 6 и вопросов юзабилити (интуитивно понятный интерфейс и всё такое). Сегодня мы говорим о js и сейчас я приведу несколько вариантов решения данного вопроса:

Выдача разного содержимого в зависимости от того, включен ли JavaScript

С помощью PHP

Например, можно при первой загрузке страницы (если в куках ничего нет) загружать пустую страницу, на которой ставить жаваскриптом куку и редиректить уже на нормальную страницу (php проверяет куку и выдаёт нужный контент). При последующих загрузках страницы, просто проверяем куку.

Или же сделать тоже самое, но независимо от кук. Они ведь тоже могут быть выключены. Сделать это можно с помощью простых запросов.

<script type="text/javascript">
document.write('<img src="isscript.php?script=1" width="1" height="1">');
</script>
<noscript>
<img src="isscript.php?script=0" width="1" height="1">
</noscript>

Это изрядное извращение, поэтому наглядных примеров не будет.

С помощью HTML и JavaScript

На странице устанавливается javascript редирект на страницу для посетителей с включённым js. Если же он выключен, то сёрфер останется на той же странице.

<script type="text/javascript">
location.replace("page-with-java-script.html");
</script>

Обратно его отправит другой редирект (уже обычный мета тег HTML), если вдруг пользователь отключит JS.

<noscript><meta http-equiv="refresh" content="0;URL=page-without-java-script.html"></noscript>

То есть, даже если сёрфер будет заниматься хернёй включать и выключать скрипты в браузере, он попадёт на нужную страницу. Вот и примерчик имеется.

Использование тега <noscript>

В предыдущем примере noscript использовался для редиректа на специальную страницу для пользоваталей без JS.

Также с помощью носкрипта можно уведомить пользователя, что JavaScript отключён и функциональность сайта ограничена.

Изначально правильное проектирование с учётом возможности отключения javascript

Самый правильный вариант. Для примера возьмём обычную ссылку:

<a href="http://neverlex.com" onclick="location.href='http://neverlex.com';return false">neverlex.com</a>

Рабочий пример

Видите, по этой ссылке пользователь в любом случае перейдёт по адресу http://neverlex.com. Если включен жаваскрипт, то сработает команда, заданная через onclick, а если отключён — то ссылка сработает, как обычный линк.

Зачем это нужно? Например, в интернет-магазине предусмотрено красивое добавление товара в корзину с помощью AJAX. Произойдёт одно из двух: либо добавление товара без перезагрузки страницы, либо с перезагрузкой. Но не в коем случае, покупатель не должен остаться без этого действия вообще. Клиент ведь всегда прав.

Что-то вроде вывода: Следует использовать javascript правильно. Так, чтобы пользователь мог воспользоваться основными функциями даже при отключённых скриптах. Также сёрфера желательно уведомить о том, что для полной функциональности администрация рекомендует включить JavaScript.

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

В конце приведу пример, почему стоит заботиться о ВСЕХ пользователях.

Вариантов очень много. Пользователь может не разбираться в компьютерах и «наклацать чото в браузере». Например, директор жирной конторы, который не умеет пользоваться компьютером, ищет себе поставщика какой-то услуги в Интернете (например, нужно сделать сайт), не собирается жалеть на этот заказ «много денег», но по каким-то причинам жаваскрипт у него выключен (зловредный сисадмин пошалил?). Он находит ваш сайт, но не может посмотреть портфолио или контакты из-за того, что менюха на вашем «сайте» работает только с помощью жаваскрипта. Он уйдёт и заплатит «много денег» другому специалисту, а вы останетесь в пролёте. Всё правильно, он сам виноват, но кто пострадал в результате?

Продолжаю обмен постовыми.

KtoNaNovenkogo.ru улучшает индексацию: Улучшаем индексацию сайта поисковиками — оптимальный файл robots.txt для Joomla, SMF, WordPress — Часть 2.

Ян Такушевич написал пост для любителей WP: Всё о миниатюрах в wordpress.

Подпишитесь на обновления блога

Получить в подарок мини-книги и 21-дневный тренинг по личностному росту.

Подписаться на рассылку «Инструменты Интернет для онлайн бизнеса»

Поделиться ссылкой:


Комментарии:

21.12.2009 18:13:40

Всегду думал, что <noindex> — это такая не самая умная выдумка Яндекса для маскировки неидексируемых ссылок, а отключенный JavaScript можно было побороть тегом <noscript> ;)

21.12.2009 18:18:42

Евгений, Вот чёрт. Спасибо, поправил. Заработался совсем :)

21.12.2009 18:29:41

При переходе на любую запись твоего блога из google reader открывается страница с ошибкой 404.

21.12.2009 18:30:52

Ян, o_0 Сейчас подпишусь, проверю. Спасибо за сигнал.

21.12.2009 18:44:45

Сейчас фид выдаёт нормальные ссылки. Убрал нафиг подсчёт кликов в Фидбурнере.

21.12.2009 19:00:57

Never Lex, да, теперь всё ок ;)

23.12.2009 07:31:05
#7 Станислав

Если выключен JavaScript, эксплоитом включить его и не париться ))))))))))))

23.12.2009 07:36:01

Оригинальное решение. А вы уверены, что ваш сайт не заблочат ПСы за эксплоит? Покажите работающую реализацию, если она действительно есть.

06.01.2010 20:59:02

«стоит заботиться о ВСЕХ пользователях» - совершенно правильный вывод.
Я javascript отключила после того, как словила вирус, который пришлось лечить с применением спец.средств. Теперь я их включаю для уже «проверенных» сайтов.
Поэтому в Вашем примере я бы не называла сисадмина зловредным, а его действия - шалостью, т.к. именно такой «директор жирной конторы, который не умеет пользоваться компьютером» с наибольшей вероятностью и натащит вирусов с каких-попало сайтов :)
P.S.Не знаю, что именно Вы понимаете под идиотскими высказываниями, но надеюсь, что моё высказывание таковым (с Вашей точки зрения) не окажется )))

17.01.2010 16:57:09

Tata_N, нет, конечно ваше высказывание не идиотское, а вполне осмысленное.

Не думаю конечно, что оно того стОит. Я имею отключение javascript. Хотя как повышенная мера безопасности вполне сойдёт.

Кстати, прикрутил наконец возможность отвечать со ссылкой на комментарий :)

27.04.2010 20:19:40

Интересно, а какой процент пользователей пользуется браузерами без поддержки javascript?

Сейчас посмотрел статистику в метрике по паре сайтов (один из них интернет-магазин) - нашёл целых 3 посетителя за год!

Сам я тоже за максимальную доступность и удобство, но стоит ли игра свеч?

27.04.2010 20:37:36

teerex, всё зависит от тематики сайта. Иногда нужные клиенты как раз пользуются всякой хренью.

28.04.2010 04:43:55

Never Lex, реальные данные есть? Или хотя-бы предположения по тематикам?

28.04.2010 05:57:51

teerex, точных данных нет. Но есть предположения, что на блогах (в магазинах) околокомпьютерной тематики обитают более менее продвинутые пользователи. А в других темах бывает полный мрак.

Делал пару сайтов для контор, у которых и владельцы сайта и целевая аудитория в компьютерах «ни бум бум».

28.04.2010 09:37:03

Never Lex, так в том-то и дело что анализировал статистику интернет-магазина ноутбуков, техники всякой.

Короче, надо думать как эксперимент достоверный замутить для таких данных.

28.04.2010 11:25:50

teerex, эксперименты достоверные будут только по отдельным тематикам. Да и думаю не убудет от разработчика, если он озаботится версией без жаваскрипта. Это полезный опыт.

28.04.2010 18:22:20

Такая мысль:
Посетитель может кликнуть на кнопку ДО ЗАГРУЗКИ скрипта, даже если JavaScript у него включён. (или, например, загрузка скрипта может оборваться)
Короче - важные управляющие элементы в любом случае должны работать и без JS, иначе - возможны значительные неудобства и ошибки.

28.04.2010 18:33:24

teerex, полностью согласен. Иногда интернет тормозит, иногда хостинг :)

26.10.2010 19:11:42
#19 Oleg

Подскажите код, который бы извещал посетителя о том, что у его браузера откл. яваскрипт?
Например чтобы вверху всплывала полоска с текстом.

26.10.2010 20:08:19

Oleg, вообще то, есть специальный тег <noscript>.

06.02.2011 06:23:16
#21 вывыв

в опере начиная с 11-й версии тег < noscript > уже не работает

24.05.2011 12:30:59
#22 js

Неправда ваша. Всё работает и в 11-й опере. Вот пример: supercena точка info. редирект по <noscript> с задержкой в 1сек. На странице редиректа (.../noscript.html) проверка, не включен ли уже js :) и, если включен, javascript-редирект обратно, на исходную. Если выключен, клиент видит пояснение, как включить js у себя в браузере. Ну и на всякий случай :) , пояснение, как определить, какой вообще у человека интернет-браузер.

Оставьте комментарий [форматирование]

Пожалуйста, воздержитесь от спама и идиотских высказываний. Жёсткая модерация. Ссылки закрыты атрибутом nofollow, а значит не несут пользы для продвижения!
Ссылки на всё кроме личных блогов и тематических блогов, сходных по тематике с данным, вырезаются.



Мой RSS фид