46

通常、ページが読み込まれ、ブラウザで Javascript が無効になっている場合、<noscript>タグを使用して警告のようなものを記述し、クライアントに Javascript を有効にするように伝えます。ただし、Facebook では、 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を使用し.load('CheckJS.html')てdiv. ただし、CheckJS.htmlの.load()内容しか読み込まないようです。要素とその内部にあるものは、 内にロードされないことを意味します。<body><head>div

2-iframe

いくつかの検索の後、完全なhtml ページを<head>ロードする唯一の可能な方法は、<iframe>.

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

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

元のページを強制的に更新せずにこれを使用できれば、これは解決策になる可能性がありますが、この解決策が見つかったとしても、本当の解決策というよりはトリック<iframe>のように感じます。

アップデート

Antonyの答えは、元のページを更新することについて私が間違っていたことを証明しましiframeた。ブラウザは更新されていることを示していますが、実際にはそうではありませんCheckJS.html。 、<noscript>JS が再度有効になると非表示になります。それでも、この iframe アプローチ全体は、10 秒ごとに更新が行われない限り (ブラウザーがフリーズする可能性があります)、それほどユーザー フレンドリーではありません。これは即時検出ではありません。

4

6 に答える 6

15

CSSソリューション

DEMOを参照してください。JSライブラリとしても利用できます。

要素をJavaScriptに継続的に置き換えて、CSSアニメーションを停止します。JavaScriptを無効にすると、CSSアニメーションが開始され、メッセージが表示されます。

@keyframes ブラウザの互換性：Chrome、Firefox 5.0以降、IE 10以降、Opera 12以降、Safari4.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>
于 2013-02-08T00:59:13.027 に答える
6

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

<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をオフにしてみてください。

于 2012-07-24T15:26:10.160 に答える
2

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

于 2012-07-24T16:19:51.480 に答える
1

これが HTML5 Boilerplate と 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;
}
于 2012-07-24T18:22:49.093 に答える
0

@JoshMock の回答を拡張して、クライアントで JS が有効になっているかどうかを検出する簡単な方法を ( Paul Irish経由で) 示します。

HTML

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

これはすべてのブラウザと互換性があり、非常に高速です。.js次に、および.no-jsクラスを使用してcssの要素を非表示/表示できます。

他の機能検出を行っている場合は、Modernizrをhtml class="no-js"マークアップと共に使用することをお勧めします (modernizr は、css3 検出と共に js クラスを自動的に追加します)。

于 2013-02-07T20:07:31.997 に答える
-3

実際には、ブラウザーが java-script をサポートしているかどうかは、その逆よりも簡単に検出できます。

もちろん、これは「JavaScriptを即座に検出するサイト」の場合です。Witch は、ブラウザからサーバーへの最初の http 要求 <--> 応答です。あなたはただ「できない」だけです。ブラウザの機能を確認した後、別のリクエストをサーバーに送信する必要があります。

現在、最初のリクエストでサーバー側から JavaScript が有効になっているかどうかを確認する方法はありません。したがって、JavaScript が無効になっている場合は、ポストバックを実行するか、他の提案を使用して JavaScript 以外のページにリダイレクトする必要があります (魔女は有効ではありませんが、機能しているようです)。

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

http 要求で取得できる「ブラウザー機能」とブラウザー「プラグイン」がいくつかあるため、目標を達成するには適切な「サーバー側」スクリプトが必要になります。

ブラウザを検出するための JavaScript に関する情報については、browserhawkまたはquirksmodeを参照してください。

また、 javascriptが無効になっている場合の検出方法に関する「保護された」質問があります

于 2013-02-07T16:42:19.083 に答える