web-dev-qa-db-ja.com

javascriptが無効になっていることをサイトが即座に検出するにはどうすればよいですか？

通常、ページが読み込まれ、ブラウザでJavascriptが無効になっている場合、_<noscript>_タグを使用して警告などを記述し、クライアントにJavascriptを有効にするように指示します。ただし、Facebookでは、after JSを有効にしてページを読み込んでも、無効にすると通知が届きます。どうすればこのようなことができますか？

更新：このメカニズムは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 to .load('CheckJS.html') into divを使用しました。ただし、.load()はCheckJS.htmlの_<body>_の内容のみをロードするようです。 _<head>_要素を意味し、その中にあるものはdiv内にロードされません。

2- iframe

いくつか検索した後、[〜＃〜] full [〜＃〜] htmlページをロードする唯一の可能な方法_<head>_を含むを使用することであることがわかりました_<iframe>_。

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

ただし、CheckJS.htmlの_<meta http-equiv="refresh" content="0">_は親ページに影響し、元のページ自体が更新を開始しました。

元のページを強制的に更新せずにこの_<iframe>_を使用できる場合、これは解決策になる可能性がありますが、この解決策が見つかったとしても、trickではなくrealソリューションより。

[〜＃〜]更新[〜＃〜]

Antony 's answeriframeが元のページを更新することについて私が間違っていたことを証明しました。ブラウザは更新を示しますが、実際にはそうではありません。そうすれば、Javascriptを回避でき、私が提供した_CheckJS.html_がその役割を果たし、さらに良いことに、JSが再度有効になると_<noscript>_が非表示になります。それでも、このiframe全体のアプローチは、更新が10秒ごとに発生する場合を除いて、それほどユーザーフレンドリーではありません（ブラウザーがフリーズする可能性があります）。これは即時検出ではありません。

javascripthtmlcssnoscript
45
Ali Bassam

CSSソリューション

[〜＃〜] demo [〜＃〜]を参照してください。 JSライブラリ としても利用できます。

要素をJavaScriptに継続的に置き換えて、CSSアニメーションを停止します。 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>
15
Antony

うーん、ブラウザ次第だと思います。 HTML5はHEAD要素で<noscript>をサポートしているので、次のようなことを試してみてください。

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

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

仕様： http://dev.w3.org/html5/markup/noscript.html

仕様から：

許可されるコンテンツ：0個以上：1つのリンク要素、1つのメタhttp-equiv = default-style要素、1つのメタhttp-equiv = refresh要素、または1つのスタイル要素

編集：ちょっと覗いて、SOはまったく同じことをします！今すぐJSをオフにしてみてください。

6
karim79

Http-equiv = refreshを継続的に延期するjavascriptコードはどうですか（メタ要素を置き換えるたびに？）javascriptがオフになるとすぐに、メタ要素は置き換えられなくなり、最終的に更新が行われます。これは単なる考えであり、メタ要素の挿入さえ可能かどうかはわかりません。

2
artistoex

これがHTML5ボイラープレートとModernizrによってどのように行われるかを調べることをお勧めします。

HTML5ボイラープレートのHTMLを見ると、 7行目 で、<html>タグにno-jsのクラスが与えられていることがわかります。次に、ModernizrのJavaScriptが実行されると、最初にno-jsクラスを削除します。

これで、no-jsクラスが存在する場合にのみコンテンツを表示するCSSルールを適用できます。

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