Как определить, если JavaScript отключен?
сегодня утром было сообщение с вопросом о том, сколько людей отключают JavaScript. Тогда я начал задаваться вопросом, какие методы могут быть использованы, чтобы определить, если пользователь отключен.
кто-нибудь знает о некоторых коротких/простых способов обнаружить, если JavaScript отключен? Мое намерение состоит в том, чтобы дать предупреждение о том, что сайт не может нормально функционировать без браузера с включенным JS.
в конечном счете я хотел бы перенаправить их на контент, который способен работать в отсутствие JS, но мне нужно это обнаружение в качестве заполнителя для начала.
30 ответов:
Я предполагаю, что вы пытаетесь решить, следует ли доставлять контент с улучшенным JavaScript. Лучшие реализации деградируют чисто, так что сайт по-прежнему работает без JavaScript. Я также предполагаю, что вы имеете в виду обнаружение на стороне сервера, а не использование
<noscript>
элемент по необъяснимой причине.нет хорошего способа выполнить обнаружение JavaScript на стороне сервера. В качестве альтернативы можно установить файл cookie с помощью JavaScript, а затем проверить этот файл 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.
используйте класс .no-js в теле и создавайте стили без javascript на основе родительского класса.no-js. Если JavaScript отключен, вы получите все стили в JavaScript , если есть поддержка JS, класс.no-js будет заменен, давая вам все стили, как обычно.
document.body.className = document.body.className.replace("no-js","js");
трюк, используемый в шаблоне HTML5http://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 является проверкой на стороне клиента.
вы можете установить куки с 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>
С благодарностью Джей.
вы хотите взглянуть на тег 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 части сайта, и если у них есть это, он появляется сразу же, когда он готов.как только вы привыкнете к этому методу, довольно легко гибридизировать ваш код для обработки обеих ситуаций, хотя я только сейчас экспериментирую элемент
noscript
тег и ожидать, что она будет иметь некоторые дополнительные преимущества.
просто немного жестко, но (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 отключен, ваш клиентский код все равно не будет работать, поэтому я предполагаю, что вы хотите, чтобы эта информация была доступна на стороне сервера. В таком случае, 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 и выше.)
метод, который я использовал в прошлом, заключается в использовании 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 включен, хотя на следующий выберите сервер будет мудрым, чтобы знать, является ли пользователь по-прежнему было JS включен или нет. Вздох.. это весело...
чтобы заставить пользователей включить JavaScripts, я устанавливаю атрибут "href" каждой ссылки на один и тот же документ, который уведомляет пользователя о включении JavaScripts или загрузке Firefox (если они не знают, как включить JavaScripts). Я сохранил фактический url-адрес ссылки на атрибут " имя "ссылок и определил глобальное событие onclick, которое считывает атрибут" имя " и перенаправляет страницу туда.
Это хорошо работает для моей пользовательской базы, хотя и немного фашистской ;).
вы не определяете, отключен ли пользователь 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.Куки, а затем проверить куки таким образом u проверить как куки, так и javascript
в некоторых случаях, делать это в обратном направлении может быть достаточно. Добавьте класс с помощью javascript:
// Jquery $('body').addClass('js-enabled'); /* CSS */ .menu-mobile {display:none;} body.js-enabled .menu-mobile {display:block;}
Это может создать проблемы обслуживания на что-нибудь сложное, но это простое решение для некоторых вещей. Вместо того, чтобы пытаться определить, когда он не загружен, просто стиль в соответствии с тем, когда он загружен.
Я придумал другой подход, используя css и сам javascript.
Это просто, чтобы начать возиться с классами и идентификаторами.фрагмент CSS:
1. Создайте правило идентификатора css и назовите его #jsDis.
2. Используйте свойство "content" для создания текста после элемента BODY. (Можно стиль, как хотите).
3 Создайте 2-е правило идентификатора 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 не является хорошей идеей.
потому что тег noscript не соответствует XHTML
значение атрибута "обновить" является нестандартным и не должно использоваться. "Обновить"принимает управление страницей от пользователя. Использование "обновить" приведет к сбою в руководстве по доступности веб-контента W3C --- Ссылка http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.
для тех, кто просто хочет отслеживать, был ли включен js, как насчет использования процедуры ajax для хранения состояния? Например, я регистрирую всех посетителей / посещений в наборе таблиц. Поле JSenabled может быть установлено в значение по умолчанию FALSE, а подпрограмма ajax установит его в TRUE, если JS включен.