Как определить, отключен ли JavaScript? - PullRequest
638 голосов
/ 23 сентября 2008

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

Кто-нибудь знает какие-то короткие / простые способы определения, отключен ли JavaScript? Я намерен предупредить, что сайт не может нормально работать, если в браузере не включен JS.

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

Ответы [ 36 ]

349 голосов
/ 13 октября 2010

Я хотел бы добавить свой .02 здесь. Это не на 100% пуленепробиваемый, но я думаю, что это достаточно хорошо.

Проблема, с моей точки зрения, в предпочтительном примере размещения какого-либо сообщения «этот сайт не работает так хорошо без Javascript» заключается в том, что вам необходимо убедиться, что ваш сайт работает нормально без Javascript. И как только вы начинаете идти по этому пути, вы начинаете понимать, что сайт должен быть пуленепробиваемым с отключенным JS, и это большой кусок дополнительной работы.

Итак, что вы действительно хотите, так это «перенаправление» на страницу с надписью «Включите JS, глупо». Но, конечно, вы не можете надежно выполнять мета-перенаправления. Итак, вот предложение:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

... где все содержимого вашего сайта заключено в div с классом "pagecontainer". CSS внутри тега noscript будет скрывать все содержимое вашей страницы и вместо этого отображать любое сообщение «no JS», которое вы хотите показать. По сути, именно это и делает Gmail ... и если он достаточно хорош для Google, то достаточно для моего маленького сайта.

278 голосов
/ 23 сентября 2008

Я предполагаю, что вы пытаетесь решить, следует ли доставлять контент с расширенным JavaScript. Лучшие реализации просто деградируют, поэтому сайт по-прежнему работает без JavaScript. Я также предполагаю, что вы имеете в виду обнаружение на стороне сервера, а не использование элемента <noscript> по необъяснимой причине.

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

194 голосов
/ 23 сентября 2008
Блоки

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

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Пользователи без js получат ссылку next_page - вы можете добавить параметры здесь, чтобы на следующей странице вы знали, пришли ли они по ссылке JS / non-JS, или попытались установить cookie-файл через JS, отсутствие которого подразумевает, что JS отключен. Оба эти примера довольно тривиальны и открыты для манипуляций, но вы поняли идею.

Если вы хотите получить чисто статистическое представление о том, сколько пользователей отключили JavaScript, вы можете сделать что-то вроде:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

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

Приведенный выше подход (отслеживание изображений) не будет работать хорошо для текстовых браузеров или тех, которые вообще не поддерживают js, поэтому, если ваша пользовательская база переходит в основном в эту область, это может быть не лучшим подходом.

45 голосов
/ 04 марта 2009

Это то, что сработало для меня: оно перенаправляет посетителя, если JavaScript отключен

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
44 голосов
/ 24 сентября 2008

Если в вашем случае использования у вас есть форма (например, форма входа в систему) и ваш серверный скрипт должен знать, если у пользователя включен JavaScript, вы можете сделать что-то вроде этого:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

Это изменит значение js_enabled до 1 перед отправкой формы. Если ваш серверный скрипт получает 0, JS отсутствует. Если он получает 1, JS!

41 голосов
/ 23 сентября 2008

Я бы посоветовал вам пойти другим путем, написав ненавязчивый JavaScript.

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

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

32 голосов
/ 25 апреля 2012

Используйте класс .no-js для тела и создайте не javascript стили на основе родительского класса .no-js. Если javascript отключен, вы получите все не-javascript стили, если есть поддержка JS, класс .no-js будет заменен, давая вам все обычные стили.

 document.body.className = document.body.className.replace("no-js","js");

трюк, используемый в шаблоне HTML5 http://html5boilerplate.com/ через modernizr, но вы можете использовать одну строку javascript для замены классов

теги noscript - это нормально, но зачем в html добавлять лишние вещи, если это можно сделать с помощью css

30 голосов
/ 07 февраля 2014

<noscript> даже не требуется, не говоря уже о , не поддерживаемом в XHTML .

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

В этом примере, если JavaScript включен, то вы видите сайт. Если нет, то вы увидите сообщение «Пожалуйста, включите JavaScript». Лучший способ проверить, включен ли JavaScript, - это просто попробовать и использовать JavaScript! Если он работает, он включен, если нет, то нет ...

13 голосов
/ 23 сентября 2008

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

Или вы можете попытаться открыть всплывающее окно, которое вы быстро закрываете (но оно может быть видно).

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

12 голосов
/ 23 сентября 2008

Вы захотите взглянуть на тег noscript.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>
...