Подтвердить что ты не робот

Как сайт может мгновенно обнаружить, что javascript отключен?

Обычно, когда страница загружается, а браузер отключен Javascript, мы используем тег <noscript>, чтобы написать что-то вроде предупреждения и сообщить клиенту включить Javascript. Однако Facebook, даже после, вы загружаете страницу с включенной поддержкой JS, а в момент ее отключения вы получаете уведомление. Как я могу сделать что-то подобное?

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

Что я пробовал

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

Чтобы достичь этого, я создал страницу CheckJS.html.

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="refresh" content="0">
</head>
<body>
    <noscript>
       JS is disabled!
    </noscript>
</body>
</html>

Эта страница будет продолжать обновлять, когда JS отключен, JS отключен!.

Чтобы добавить эту страницу на мою исходную страницу. Я попробовал следующее:

1-.load()

Я использовал JQuery до .load('CheckJS.html') внутри div. Однако кажется, что .load() загружает только содержимое <body> CheckJS.html. Означает элемент <head> и то, что внутри него не будет загружено внутри div.

2- iframe

После некоторого поиска я обнаружил, что единственным возможным способом загрузки страницы FULL html , включая <head>, является использование <iframe>.

<iframe src="CheckJS.html"></iframe>

Однако <meta http-equiv="refresh" content="0"> CheckJS.html влияет на родительскую страницу, сама исходная страница начала обновляться.

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

UPDATE

Антоний ответ доказал, что я ошибался в том, что iframe обновляет исходную страницу, браузер показывает, что ее обновление, но на самом деле его нет, если это так, то Javascript можно избежать, CheckJS.html, который я предоставил, выполняет эту работу, и даже лучше, <noscript> будет скрыт, когда JS будет снова включен. Однако весь этот подход iframe не настолько удобен для пользователя (может заморозить браузер), если обновление не происходит каждые 10 секунд или около того, что не является мгновенным обнаружением.

4b9b3361

ОТВЕТЫ

Ответ 1

Решение для CSS

См. DEMO. Также доступна в виде JS library.

Остановите анимацию CSS, постоянно заменяя элемент JavaScript. Когда JavaScript отключен, анимация CSS запускается и отображает сообщение.

@keyframes Совместимость браузера: Chrome, Firefox 5.0+, IE 10+, Opera 12+, Safari 4.0 +

<style>
.nojs_init { 
position: relative;
animation:nojs-animation 0.2s step-end;
-moz-animation:nojs-animation 0.2s step-end; /* Firefox */
-webkit-animation:nojs-animation 0.2s step-end; /* Safari and Chrome */
-o-animation:nojs-animation 0.2s step-end; /* Opera */
}

@keyframes nojs-animation
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}

@-moz-keyframes nojs-animation /* Firefox */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}

@-webkit-keyframes nojs-animation /* Safari and Chrome */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}

@-o-keyframes nojs-animation /* Opera */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
</style>

<body>
<div id="content"></div>
<div id="nojs" class="nojs_init"><noscript>JavaScript is <span style="font-weight:bold;">disabled</span>.</noscript></div>
</body>
<script>
document.getElementById("content").innerHTML = 'JavaScript is <span style="font-weight:bold;">enabled</span>. Try disabling JavaScript now.';

var elm = document.getElementById("nojs"),
    animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '';

if( elm.style.animationName ) { animation = true; }    

if( animation === false ) {
  for( var i = 0; i < domPrefixes.length; i++ ) {
    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}

// Continuously replace element
function jsdetect() {
    var elm = document.getElementById("nojs");
    var newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(newone, elm);
}

// Only apply to browsers that support animation
if (animation) {
    elm.innerHTML = 'JavaScript is <span style="font-weight:bold;">disabled</span>.';
    setInterval(jsdetect, 0);
}
</script>

Ответ 2

Я думаю, это зависит от браузера. HTML5 поддерживает <noscript> в элементе HEAD, поэтому вы можете попробовать что-то вроде этого:

<style>
    .noscriptMessage {
         display: none;
     }
</style>
<noscript>
    <style>
        .noscriptMessage {
             display: block
        }
    </style>
</noscript>

<body>
    <div class=".noscriptMessage">Foo bar baz</div>
    ...
</body>

Spec: http://dev.w3.org/html5/markup/noscript.html

Из спецификации:

Допустимое содержимое: ноль или более: один элемент ссылки или один мета http-equiv = элемент стиля по умолчанию или один мета-http-equiv = обновление элемент или один элемент стиля

Изменить: эй заглядывает, ТАК делает то же самое! Просто попробуйте отключить JS сейчас.

Ответ 3

Как насчет кода javascript, который постоянно откладывает обновление http-equiv = refresh (каждый раз, заменяя мета-элемент?) Как только javascript отключен, мета-элемент больше не заменяется, и обновление в конечном итоге произойдет. Это просто мысль, я не знаю, возможна ли установка мета элементов.

Ответ 4

Я бы рекомендовал посмотреть, как это делается с помощью HTML5 Boilerplate и Modernizr.

Если вы посмотрите на HTML5 Boilerplate HTML, на строка 7 вы увидите, что тегу <html> задан класс no-js, Затем, когда выполняется JavaScript Modernizr, первое, что он делает, это удалить класс no-js.

Это сделано, вы можете применять правила CSS, которые отображают только контент, если присутствует класс no-js:

#no-script-message {
    display: none;
}
.no-js #no-script-message {
    display: block;
}

Ответ 5

Развернувшись на ответ @JoshMock, вот простой подход (через Paul Irish), чтобы определить, включен ли JS-клиент:

HTML

<html class="no-js">
<head>
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

Это должно быть совместимо со всеми браузерами и довольно быстро. Затем вы можете скрыть/показать элементы в css с классами .js и .no-js.

Если вы выполняете любое другое обнаружение функции, я бы предложил использовать Modernizr с помощью разметки html class="no-js" (modernizr автоматически добавит js для вас, наряду с обнаружением css3).

Ответ 6

На самом деле, легче обнаружить, поддерживает ли браузер java- script, чем наоборот.

Конечно, это происходит в случае, когда "сайт мгновенно обнаруживает javascript". Ведьма - это первый запрос HTTP-запроса ↔ от браузера к серверу. Вы просто "не можете". После определения возможностей браузера вам придется отправить другой запрос на сервер.

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

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

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

См. browserhawk или quirksmode для некоторые сведения о javascript для обнаружения браузера.

Кроме того, существует "защищенный" вопрос aboout how-to-detect-if-javascript-is-disabled