Як визначити, якщо JavaScript відключений?

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

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

Врешті-решт, я хотів би перенаправити їх на вміст, який може працювати за відсутності JS, але мені потрібно це виявлення як заповнювача.

Я припускаю, що ви намагаєтеся вирішити, чи слід надсилати вміст, розширений JavaScript. Найкращі реалізації деградують чисто, так що сайт все ще працює без JavaScript. Я також припускаю, що ви маєте на увазі виявлення на стороні сервера , а не використання <noscript>елемента з незрозумілої причини.

Не існує хорошого способу виявлення JavaScript на стороні сервера. В якості альтернативи можна встановити файл cookie за допомогою JavaScript , а потім протестувати цей файл cookie за допомогою сценаріїв на стороні сервера при наступних переглядах сторінок. Однак це не підходить для вирішення того, який вміст надсилати, оскільки він не зможе відрізнити відвідувачів без файлів 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>

... де весь вміст на вашому веб-сайті обгорнуто розділом класу "pagecontainer". CSS всередині тега noscript приховає весь вміст вашої сторінки, а натомість відобразить будь-яке повідомлення "немає 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']). Потім можна вивести порожнє зображення 1х1 назад у браузер. Сценарій не запускається для користувачів, у яких відключений 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 тощо), призначена для використання в такому вигляді, як припущення, що існує ISN'T 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 відключений, код на стороні клієнта все одно не запуститься, тому я припускаю, що ви маєте на увазі, що ви хочете, щоб ця інформація була доступна на сервері. У такому разі ніспис є менш корисним. Натомість я маю прихований вхід і використовую 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, і якщо його не знайдено, вживає необхідних заходів. Звичайно, ця методика покладається на включення файлів 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 таким чином u перевірити як cookie, так і javascript

У деяких випадках це може бути достатньо. Додайте клас за допомогою javascript:

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

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

Це може створити проблеми з технічним обслуговуванням будь-якого складного, але для деяких речей це просте виправлення. Замість того, щоб намагатися виявити, коли він не завантажений, просто стиль відповідно до того, коли він завантажений.

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

• Користувачі, які відвідують 100 сторінок або лише 1, рахуються по 1 на кожній. Це дозволяє зосередити увагу на окремих користувачах, а не на сторінках.
• Ні в якому разі не порушує потік, структуру чи семантичність сторінки
• Не вдалося журналювати агент користувача. Це дозволяє виключити ботів зі статистичних даних, таких як Google Bot і Bing bot, у яких зазвичай вимкнено 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 Створіть 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. Візьміть ідентифікатор 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 був наданий ідентифікатор #jsDis:
- Якщо Javascript увімкнено, він сам змінить атрибут тегу BODY.
- Якщо Javascript вимкнено, він покаже текст правила css 'content:'.

Ви можете пограти з контейнером #wrapper або з будь-яким DIV, який використовує JS.

Сподіваюсь, це допоможе отримати ідею.

Додавання оновлення в мета всередині noscript не є хорошою ідеєю.

1. Тому що тег noscript не сумісний з XHTML

2. Значення атрибута "Refresh" нестандартне, і його не слід використовувати. "Оновити" відводить контроль над сторінкою від користувача. Використання "Refresh" спричинить збій у Посібниках з доступності веб-вмісту W3C --- Довідка http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .