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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

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

Ответ 13

Добавьте это в тег 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>

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

Ответ 14

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

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

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

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

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

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

Ответ 15

Общим решением является метатег в сочетании с 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.

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

Ответ 16

Это "самый чистый" идентификатор решения:

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

Ответ 17

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

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

Ответ 18

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

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

Ответ 19

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

Ответ 20

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

Ответ 21

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

Ответ 22

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

Ответ 23

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

Ответ 24

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

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

Ответ 25

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

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

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

Ответ 26

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

Ответ 27

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

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

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

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

Ответ 28

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

  • Пользователи, посещающие 100 страниц или всего 1, подсчитывают 1 каждый. Это позволяет сфокусироваться на одиночных пользователях, а не на страницах.
  • Не нарушает поток страниц, структуру или семантику в любом случае
  • Может регистрировать пользовательский агент. Это позволяет исключить ботов из статистики, таких как бот-бот и бот-бот, которые обычно отключены 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()) . "'");

Ответ 29

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

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

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

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

Ответ 30

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

  • Поскольку тег noscript не соответствует XHTML

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