JavaScriptが無効になっているかどうかを検出するには?


14 Answers

ここに私の.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"クラスのdivでラップされています。 noscriptタグの中のCSSはあなたのページの内容をすべて隠し、表示したい "no JS"メッセージを表示します。 これは実際にGmailが行うと思われるものです...もしGoogleにとって十分なものであれば、私の小さなサイトで十分です。

Question

今朝、JavaScriptを無効にした人の数についての質問がありました。 その後、私はどのようなテクニックを使用してユーザーが無効になっているかを判断することができるのだろうかと考え始めました。

誰かがJavaScriptが無効になっているかどうかを検出する簡単な方法や簡単な方法を知っていますか? JSを有効にしたブラウザがなくても、サイトが正常に機能しないという警告を表示することを目的としています。

最終的には、JSがなければ動作可能なコンテンツにリダイレクトしたいと思っていますが、この検出をプレースホルダーとして開始する必要があります。




私はhere紹介した純粋なサーバー側のソリューションを使用してクッキーをチェックするJquery.Cookieを使用してクッキーを削除してjavascriptをチェックし、この方法でクッキーとjavascriptの両方をチェックする




noscriptタグはうまく動作しますが、本質的にnoscriptはクライアント側のチェックであるため、不要なJSファイルの処理を続行するためには、それぞれのページ要求がさらに必要になります。

あなたはJSでクッキーを設定できますが、他の人が指摘しているように、これは失敗する可能性があります。 理想的には、JSクライアント側を検出でき、Cookieを使用せずにJSが有効であることを示すセッションサーバー側をそのユーザーに設定することができます。

src属性が実際にサーバーサイドのスクリプトであるJavaScriptを使用して、1x1イメージを動的に追加する可能性があります。 このスクリプトは、JSが有効になっている現在のユーザーセッション($ _SESSION ['js_enabled'])に保存されます。 1x1の空白の画像をブラウザに出力することができます。 JSが無効になっているユーザーのためにスクリプトは実行されないため、$ _SESSION ['js_enabled']は設定されません。 その後、このユーザーに提供されている他のページについては、すべての外部JSファイルを含めるかどうかを決めることができますが、ユーザーの一部がNoScript Firefoxアドオンを使用しているか、JS他の理由で一時的に無効になっています。

追加のHTTP要求がページのレンダリングを遅らせることがないように、おそらくこのチェックをページの終わり近くのどこかに含めることが望ましいでしょう。




javascriptが無効になっていると、クライアントサイドのコードは実行されないため、その情報をサーバーサイドで利用できるようにすることを意味します。 その場合、 noscriptはあまり役に立ちません。 代わりに、私は隠された入力を持って、値を入力するためにJavaScriptを使用します。 次のリクエストまたはポストバックの後に値がある場合は、JavaScriptがオンになっていることがわかります。

noscriptのようなものには注意してください。最初のリクエストではJavaScriptが無効になっているかもしれませんが、将来のリクエストでそれを有効にします。




ユーザーにJavaScriptを有効にするために、各リンクの 'href'属性を同じドキュメントに設定します。これにより、JavaScriptを有効にするか、Firefoxをダウンロードするようにユーザーに通知します(JavaScriptを有効にする方法がわからない場合)。 私は実際のリンクURLをリンクの '名前'属性に保存し、 '名前'属性を読み込んでそのページをリダイレクトするグローバルonclickイベントを定義しました。

これは私のユーザベースではうまくいくが、少しファシストだが)。




何でそれを検出する? JavaScript? それは不可能だろう。 ログを記録するだけの場合は、トラッキングスキームを使用できます。各ページには、特別なリソース(おそらく非常に小さなgifなど)をリクエストするJavaScriptがあります。 こうすることで、ユニークなページリクエストとトラッキングファイルのリクエストの違いに気を取ることができます。




場合によっては、それを後ろ向きにすることで十分です。 javascriptを使用してクラスを追加する:

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

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

これは何か複雑なメンテナンスの問題を引き起こす可能性がありますが、いくつかの点では単純な修正です。 ロードされていないときを検出しようとするのではなく、ロードされたときに応じてスタイルを変えます。




noscriptの中のメタにリフレッシュを追加するのは良い考えではありません。

  1. noscriptタグはXHTMLに準拠していないため

  2. 属性値 "Refresh"は標準ではないため、使用しないでください。 「リフレッシュ」は、ユーザーから離れたページを制御します。 「リフレッシュ」を使用すると、W3Cのウェブコンテンツアクセシビリティガイドライン--- http://www.w3schools.com/TAGS/att_meta_http_equiv.asp参照できなくなりhttp://www.w3schools.com/TAGS/att_meta_http_equiv.asp




あなたは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を書くことによって、逆に進むことをお勧めします。

JavaScriptを使用しているユーザーのためにプロジェクトの機能を無効にしてください。終了したら、JavaScript UIの拡張機能を実装してください。

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を試してみることです。 それがうまくいけば、有効になっています。そうでなければ、そうではありません...




ちょっと難しいですが(ヘアボーが私にアイデアを与えました)

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ソリューションを知っていますか?




たとえば、document.location = 'java_page.html'のようなものを使用して、ブラウザを新しいスクリプトを含むページにリダイレクトすることができます。 リダイレクトに失敗した場合は、JavaScriptが利用できないことを意味します。その場合は、CGIツールを使用するか、タグ間に適切なコードを挿入します。 (注意:NOSCRIPTは、Netscape Navigator 3.0以降でのみ利用可能です。)

クレジットhttp://www.intranetjournal.com/faqs/jsfaq/how12.html




これは私のために働いたものです:javascriptが無効になっている場合、訪問者をリダイレクトします

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



私はあなたがnoscriptタグにイメージタグを挿入し、統計情報を何回あなたのサイトとどのくらいの頻度でこのイメージがロードされているか見ることができると思います。




Related