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

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

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

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

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

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

Я хотел бы добавить свой .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ссылку - вы можете добавить параметры здесь, чтобы на следующей странице вы знали, пришли ли они по ссылке 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

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

Используйте класс .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?

просто немного сложно, но (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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

Распространенным решением является использование метатега в сочетании с 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 отключен, ваш код на стороне клиента не будет работать в любом случае, поэтому я предполагаю, что вы хотите, чтобы эта информация была доступна на стороне сервера. В этом случае, Noscript менее полезен. Вместо этого я бы использовал скрытый ввод и использовал бы javascript для заполнения значения. После вашего следующего запроса или обратной передачи, если значение там, вы знаете, что JavaScript включен.

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

Например, вы можете использовать что-то вроде document.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, и сервер должен будет ждать следующего щелчка, чтобы определить, включен ли пользователь JS. Кроме того, еще одним недостатком является то, что 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-бизнесу.

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

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

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

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

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

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

• Пользователи, посещающие 100 страниц или только 1, считаются по 1 на каждую. Это позволяет сосредоточиться на отдельных пользователях, а не на страницах.
• В любом случае не нарушает поток, структуру или семантику
• Мог логи агента пользователя. Это позволяет исключить ботов из статистики, таких как бот Google и бот Bing, которые обычно отключают JS! Может также войти IP, время и т. Д ...
• Всего одна проверка на сеанс (минимальная перегрузка)

Мой код использует PHP, MySQL и JQuery с Ajax, но может быть адаптирован для других языков:

Создайте таблицу в вашей БД, как эта:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Добавьте это на каждую страницу после использования session_start () или эквивалентного (требуется jquery):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Создайте страницу JSOK.php следующим образом:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");

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

Фрагмент CSS:
1. Создайте правило css ID и назовите его #jsDis.
2. Используйте свойство content для создания текста после элемента BODY. (Вы можете стилизовать это как хотите).
3 Создайте второе правило ID CSS и назовите его #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. Назовите атрибут элемента BODY с идентификатором #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 .