Как определить, отключен ли JavaScript?

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

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

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

30 ответов


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

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


Я хотел бы добавить мои .Здесь 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, это достаточно хорошо для моего маленького сайта.


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 link-Вы можете добавить параметры здесь, чтобы вы знали на следующей странице, пришли ли они по ссылке JS/non-JS или попытались установить cookie через JS, отсутствие которого подразумевает, что JS отключен. Оба эти примера довольно тривиальны и открыты для манипулирование, но вы поняли идею.

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

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

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

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


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

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

Если ваш вариант использования заключается в том, что у вас есть форма (например, форма входа), и ваш серверный скрипт должен знать, включен ли у пользователя 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!


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

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

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


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

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

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

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


<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! если он работает, он включен, если нет, то это не так...


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

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

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


тег noscript работает хорошо, но потребует каждого дополнительного запроса страницы для продолжения обслуживания бесполезных файлов JS, поскольку по существу noscript является проверкой на стороне клиента.

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

возможность динамически добавить изображение 1x1 использование JavaScript, где атрибут src фактически является сценарием на стороне сервера. Все, что делает этот скрипт, это сохраняет текущий сеанс пользователя, который включен JS ($_SESSION['js_enabled']). Затем вы можете вывести пустое изображение 1x1 обратно в браузер. Сценарий не будет выполняться для пользователей, у которых JS отключен, и, следовательно, $_SESSION['js_enabled'] не будет установлен. Затем для дальнейших страниц, обслуживаемых этим пользователем, вы можете решить, включать ли все ваши внешние JS-файлы, но вы всегда захотите включить проверьте, так как некоторые из ваших пользователей могут использовать надстройку NoScript Firefox или временно отключили JS по какой-либо другой причине.

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


добавьте это в тег HEAD каждой страницы.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

Так что у вас есть:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

С благодарностью Джей.


вы захотите взглянуть на тег 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>

потому что я всегда хочу дать браузеру что-то стоящее, чтобы посмотреть, я часто использую этот трюк:

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

любые элементы, которые потребуют JavaScript, я помещаю внутри тега что-то например:

<span name="jsOnly" style="display: none;"></span>

тогда в начале моего документа я использую .onload или document.ready в рамках цикла getElementsByName('jsOnly') установить .style.display = ""; включение зависимых элементов JS. Таким образом, не-JS-браузеры никогда не должны видеть зависимые от JS части сайта, и если у них есть это, он появляется сразу же, когда он готов.

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


просто немного жесткий, но (hairbo дал мне идею)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

будет работать в любом случае верно? даже если тег noscript не поддерживается (требуется только некоторый css) кто-нибудь знает не css-решение?


общим решением является мета-тег в сочетании с noscript для обновления страницы и уведомления сервера, когда JavaScript отключен, например:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

в приведенном выше примере, когда JavaScript отключен, браузер перенаправит на домашнюю страницу веб-сайта через 0 секунд. Кроме того, он также отправит на сервер параметр javascript=false.

сценарий на стороне сервера, такой как node.js или PHP могут затем проанализировать параметр и узнать, что Отключен JavaScript. Затем он может отправить клиенту специальную версию веб-сайта без JavaScript.


Если javascript отключен, ваш клиентский код все равно не будет работать, поэтому я предполагаю, что вы хотите, чтобы эта информация была доступна на стороне сервера. В таком случае ...--1-->тега NoScript менее полезны. Вместо этого у меня был бы скрытый ввод и использование javascript для заполнения значения. После вашего следующего запроса или обратной передачи, если значение есть, вы знаете, что javascript включен.

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


Это" самое чистое " использование идентификатора решения:

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>

вы можете, например, использовать что-то вроде документа.location = ' java_page.html", чтобы перенаправить браузер на новую, загруженную скриптами страницу. Невозможность перенаправления означает, что JavaScript недоступен, и в этом случае вы можете либо прибегнуть к CGI ro utines, либо вставить соответствующий код между тегами. (Примечание: NOSCRIPT доступен только в Netscape Navigator 3.0 и выше.)

кредит http://www.intranetjournal.com/faqs/jsfaq/how12.html


метод, который я использовал в прошлом, заключается в использовании JavaScript для написания файла cookie сеанса, который просто действует как флаг, чтобы сказать, что JavaScript включен. Затем серверный код ищет этот файл cookie и, если он не найден, принимает соответствующие меры. Конечно, этот метод полагается на куки-файлы, которые включены!


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


люди уже опубликовали примеры, которые являются хорошими вариантами для обнаружения, но на основе вашего требования "дать предупреждение о том, что сайт не может функционировать должным образом без браузера, имеющего JS включен". Вы в основном добавляете элемент, который появляется как-то на странице, например "всплывающие окна" при переполнении стека, когда вы зарабатываете значок, с соответствующим сообщением, а затем удаляете это с помощью Javascript, который запускается, как только страница загружена (и я имею в виду DOM, а не весь страница.)


обнаружить его в чем? В JavaScript? Это невозможно. Если вы просто хотите его для ведения журнала, вы можете использовать какую-то схему отслеживания, где каждая страница имеет JavaScript, который сделает запрос на специальный ресурс (возможно, очень маленький gif или подобные). Таким образом, вы можете просто взять разницу между уникальными запросами страницы и запросами для вашего файла отслеживания.


Почему бы вам просто не поместить захваченный обработчик событий onClick (), который будет срабатывать только при включении JS, и использовать его для добавления параметра (JS=true) к нажатому/выбранному URL - адресу (вы также можете обнаружить выпадающий список и изменить значение добавить скрытое поле формы). Поэтому теперь, когда сервер видит этот параметр (js=true), он знает, что JS включен, а затем делает вашу причудливую логику на стороне сервера.
Недостатком этого является то, что в первый раз пользователи приходят на ваш сайт, закладку, URL, созданный поисковой системой URL - вам нужно будет определить, что это новый пользователь, поэтому не ищите NVP, добавленный в URL, и серверу придется ждать следующего щелчка, чтобы определить, что пользователь включен/отключен. Кроме того, еще один недостаток заключается в том, что URL-адрес будет отображаться на URL-адресе браузера, и если этот пользователь затем закладки этот URL-адрес будет иметь js=true NVP, даже если пользователь не имеет JS включен, хотя при следующем щелчке сервер будет мудрым, чтобы знать, был ли пользователь все еще JS включен или нет. Вздох.. это весело...


чтобы заставить пользователей включить JavaScripts, я устанавливаю атрибут "href" каждой ссылки на тот же документ, который уведомляет пользователя о включении JavaScripts или загрузке Firefox (если они не знают, как включить JavaScripts). Я сохранил фактический url-адрес ссылки на атрибут "name" ссылок и определил глобальное событие onclick, которое читает атрибут "name" и перенаправляет страницу туда.

Это хорошо работает для моей пользовательской базы, хотя и немного фашистской ;).


вы не определяете, отключен ли у пользователя javascript (на стороне сервера или клиента). Вместо этого вы предполагаете, что javascript отключен, и создаете свою веб-страницу с отключенным javascript. Это устраняет необходимость noscript, который вы должны избегать использования в любом случае, потому что он работает не совсем правильно и не нужен.

например, просто создайте свой сайт, чтобы сказать <div id="nojs">This website doesn't work without JS</div>

тогда ваш скрипт просто сделает document.getElementById('nojs').style.display = 'none'; и идти о своем обычном бизнесе JS.


проверьте наличие куки-файлов с помощью чистого серверного решения, которое я ввел здесь затем проверьте javascript, отбросив cookie с помощью Jquery.Cookie, а затем проверьте наличие cookie таким образом u проверьте наличие как cookies, так и javascript


в некоторых случаях достаточно сделать это назад. Добавьте класс с помощью javascript:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

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


Я придумал другой подход, используя css и javascript.
Это просто, чтобы начать возиться с классами и идентификаторами.

фрагмент CSS:
1. Создайте правило CSS ID и назовите его #jsDis.
2. Используйте свойство "content" для создания текста после элемента BODY. (Можно стиль, как хотите).
3 Создайте 2 - е правило css ID и назовите его #jsEn и стилизовать его. (для простоты я дал своему правилу #jsEn другой фон цвет.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

фрагмент JavaScript:
1. Создайте функцию.
2. Возьмите идентификатор тела с помощью getElementById и назначьте его переменной.
3. Используя функцию js 'setAttribute', измените значение атрибута ID элемента BODY.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

часть HTML.
1. Имя атрибута элемента тела с идентификатором #jsDis.
2. Добавьте событие onLoad с именем функции. (формат JSON.))(

<body id="jsDis" onLoad="jsOn()">

из-за Тегу BODY был присвоен идентификатор #jsDis:
- Если Javascript включен, он сам изменит атрибут тега BODY.
- Если Javascript отключен,он покажет текст правила css " content:".

вы можете играть с контейнером # wrapper или с любым DIV, который использует JS.

Надеюсь, это поможет понять идею.


добавление обновления в meta внутри noscript не является хорошей идеей.

  1. потому что тег noscript не совместим с XHTML

  2. значение атрибута "обновить" является нестандартным и не должно использоваться. "Обновить"забирает управление страницей у пользователя. Использование "обновить" приведет к сбою в руководящих принципах доступности веб-контента W3C --- Ссылка http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.


для тех, кто просто хочет отслеживать, включен ли js, как насчет использования процедуры ajax для хранения состояния? Например, я регистрирую всех посетителей / посещений в наборе таблиц. Поле JSenabled можно установить по умолчанию FALSE, а подпрограмма ajax установит его в TRUE, если JS включен.