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

659

今朝、何人がJavaScriptを無効にしているのかを尋ねる投稿がありました。それから私は、ユーザーが無効にしているかどうかを判断するためにどのような手法が使用されるのか疑問に思い始めました。

JavaScriptが無効になっているかどうかを検出するための簡単な方法を知っている人はいますか？私の意図は、ブラウザでJSが有効になっていないとサイトが正しく機能しないことを警告することです。

最終的には、JSがなくても機能するコンテンツにリダイレクトしたいのですが、開始するにはプレースホルダーとしてこの検出が必要です。

javascript  html  code-snippets 
— MikeJ
ソース
この情報をどのように処理しますか？それはあなたが得る答えを変える可能性があります-例えばプログレッシブエンハンスメントは、JavaScriptが無効にされていることを検出してそれに基づいて特定のアクションをとることを試みるよりも一般的に好まれるべきです。
— ジョニーブキャナン
プログレッシブエンハンスメントは私が探しているものです。JSが有効になっていない場合や対応しているブラウザがない場合に適切に機能する代替コンテンツにリダイレクトできるようにしたい。
— MikeJ 2008
1
ゆうた Nicholas Zakasからのこの投稿は1年以上前のものですが、約2％と言っています。
— sdleihssirhc 2011
最も簡単な方法は、noscriptを使用してJavaScript以外のサイトを表示し、JavaScriptを使用して、スタイルの表示を変更することにより、JavaScript依存要素を表示することです。
— Myforwik、2012
— Vitim.us

回答:

286

JavaScriptで拡張されたコンテンツを配信するかどうかを決定しようとしていると思います。最良の実装は完全に低下するため、サイトはJavaScriptなしで引き続き動作します。また、説明されていない理由で要素を使用するのではなく、サーバー側の検出を意味していると思います<noscript>。

サーバー側のJavaScript検出を実行する良い方法はありません。別の方法として、JavaScriptを使用してCookieを設定することもできます。その後のページビューでサーバーサイドスクリプトを使用してそのCookieをテストすることもできます。ただし、Cookieを使用しない訪問者と新規訪問者またはCookieをブロックしている訪問者を区別できないため、配信するコンテンツを決定するのに適していません。

— ashleedawg
ソース
129
<noscript>は、JavaScript以外のコンテンツを指定する最も意味の正確な方法です。JavaScriptが無効になっているかどうかを検出するのではなく、有効になっているかどうかを検出します。そのため、デフォルトで「私のサイトを適切に使用するにはJavaScriptが必要です」というメッセージを表示しますが、すぐにonLoadのJavaScript関数で非表示にします。
— matt lohkamp 2008
58
@matt lohkamp：または、デフォルトでメッセージを非表示にし、<style>ブロックを内に配置し<noscript>て再表示します（JSが有効になっている場合は、そこにリフローしません）。驚くべきことに、すべての最新ブラウザでの、さらにはIE6で、この作品は
— Piskvorは、建物左
7
@matt-私はしばらくこれを行っていましたが、低速の接続ではメッセージがしばらく表示され続け、ユーザーを混乱させています。私はここで別の解決策を探しています。@Piskvor-ヘッダーの<noscript>タグは検証されず、本文の<style>タグは検証されません。
— Ben
20
...なぜ検証に関心があるのですか？検証するためだけに検証していますか？「正しい」とは言えないかもしれませんが、「フードの下にほこりが少しある」状態で機能し、それを達成した場合、問題は何ですか？心配しないで、私は判断しません;-)
— keif
4
<noscript>タグ（<noscript> <div style = "color：red;"> blahblah </ div> </ noscript>やsgなど）内の特定の要素にスタイル属性を使用するだけの場合、有効なままです。 。しかし、いくつかの.noscript（または同様の）クラス化要素のスタイルを定義するヘッダーに<style> BLOCKを通常配置し、本文の<noscript>タグ内で、指定された要素に単に次のように、以前に定義された.noscriptクラス：<noscript> <div class = "noscript"> blahblah </ div> </ noscript>
— Sk8erPeter '19年
360

ここに.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は、ページのコンテンツをすべて非表示にし、代わりに、表示する「JSなし」メッセージを表示します。これは実際にはGmailが行うように見えます...そして、それがGoogleにとって十分なものであれば、私の小さなサイトにとって十分なものです。

— ヘアボ
ソース
12
@steveはgoogle.comを検証しようとしますか？検証は、ドキュメントがスペックシートにどれだけ近いかを決定するだけであり、ページのユーザビリティに影響を与えることはありません。
— JKirchartz、2011
71
@JonasGeiregat Webアプリが構築されていて、JavaScriptが機能する必要がある場合、ユーザーにJavascriptを要求するように強制することの何が問題になっていますか？このコメントをよく聞きますが、それは最も単純なサイトにのみ有効です。JSなしでFacebookを試して、何が起こるかを確認してください。アプリがJavascript用に作成されている場合、ユーザーの99％が有効になっていることを要求することの何が問題になっていますか？
— Lee Benson
19
@Leeが釘を打つと、ユーザーがサポートできる範囲に線を引く前に、ユーザーに対して多くのことを行うことができます。すべてのユーザーがインターネット対応デバイスを持っていることを期待しています。インターネットへのアクセスを拒否するユーザーのために、紙のバージョンのサイトも実装する必要がありますか？
— Kolors 2014
14
@Kolors、私は2012年3月にそのコメントをしました、そして私はそれが今日二重に真実であると主張します。それ以来、Meteor、Angular.Js、Famo.us、そしてすべてを開始するためにJavascriptを必要とする大量の素晴らしいライブラリーを手に入れました。JSを無効にすることを選択したユーザーが実際に達成しようとしているのはどういうことか...頑固なユーザーのサブセット...
— リーベンソン
6
ええ、私はJSを有効にするのを忘れたので、なぜあなたの回答に賛成できないのか疑問に思いました:-)）私はあなたのソリューションを気に入って実装しました！ありがとう！
— Garavani
198

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 /非JSリンクを介して来たかどうか、またはJSを介してcookieを設定しようとしているかどうかを次のページで確認できます。無効になっています。これらの例はどちらもかなり自明であり、操作を受け入れることができますが、アイデアは理解できます。

何人のユーザーがJavaScriptを無効にしているのかを純粋に統計的に知りたい場合は、次のようにします。

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

次に、アクセスログをチェックして、この画像がヒットした回数を確認します。やや粗雑な解決策ですが、ユーザーベースに対してパーセンテージで良いアイデアを提供します。

上記のアプローチ（画像追跡）は、テキストのみのブラウザやjsをまったくサポートしていないブラウザではうまく機能しないため、ユーザーベースが主にその領域に向かってスイングしている場合、これは最善のアプローチではない可能性があります。

— ConroyP
ソース
7
これはあまり効果的ではありません。たとえば、通常JavaScriptをサポートしていないテキストのみのブラウザを使用しているユーザーはカウントされません。少なくとも、そのイメージのキャッシュを無効にする必要があります。
— ジム
3
JSをまったくサポートしていないブラウザは、単にnoscriptタグを無視して画像を表示するだけではありませんか？
— LKM
1
@LKM：それらがどのように記述されているかによって異なりますが、おそらく1x1pxのドットにします。このオプションは主にサーバー側の使用パターンを追跡するためのものであり、JavaScript機能を持たないユーザーによってトリガーされるため、問題ありません。
— ConroyP 2008年
あなたのスタイルそれは... positioniseverything.net/explorer.html見たらIE8のバグとnoscript要素タグが現在存在することに注意してください
— アレックス・
2
また、その画像をサーバーサイドスクリプトとして提供し、mime-typeを設定し、それを使用してユーザーに関する情報をログに記録したり、Cookieをドロップしたりすることができます... px.sklar.com/code.html/id=256
— JKirchartz
46

これは私にとってうまくいきました：JavaScriptが無効になっている場合、訪問者をリダイレクトします

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
— Ernie13
ソース
6
これは無効です。noscript要素にmeta要素を含めることはできません。さまざまな方法でエラー回復を実行する可能性があるため、すべてのブラウザー（現在テストできない将来のブラウザーを含む）で確実に機能することを信頼しません。
— クエンティン
15
これは無効な場合がありますが、Facebookのコードを見てください。<head>部分で同じソリューションを使用しています。これは、Facebookのコードが有効なコードから遠いため、非常に優れたソリューションであるとは限りませんが、それは多くのユーザーのブラウザで動作しますが、これは重要な側面になる場合があります。しかし、実際には推奨されていないのは事実です。これはコードです：<noscript> <meta http-equiv = refresh content = "0; URL = / about / messages /？_ fb_noscript = 1" /> </ noscript>
— Sk8erPeter '19
IE9（少なくとも）には、「META REFRESHを許可する」という設定があります。私はそれをオフにする人は多くないようですが、おそらくjavascriptを好まない人はそうしますが、100％必要な場合はこれではありません。
— jenson-button-event 2013
HTML5で有効です。
— Naszta 2013
1
これはLinkedinで共有しようとするとリンクを破壊します、私たちは難しい方法を見つけました...これは良い考えではありません。
— Linkedin
44

フォーム（ログインフォームなど）があり、サーバー側のスクリプトでユーザーが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！

— アンドリューヘッジス
ソース
44

控えめなJavaScriptを作成して、逆の方法をとることをお勧めします。

JavaScriptが無効になっているユーザーがプロジェクトの機能を使用できるようにします。完了したら、JavaScript UI拡張機能を実装します。

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

— ロステロン酸
ソース
145
人生短し。それは2012- JavaScriptを有効にするか、家に帰る
— Yarin
25
「人生は短すぎます。2012年です-JavaScriptを有効にするか、家に帰ってください！」JSがない場合に表示するのに最適な小さなメッセージです。@Yarin
5
私はまた、それが素晴らしいと言ってログインしました！@ヤリン。私は、一般には公開されない小さなサイトを作成しています（イントラネットのようなものですが、友達が集まってプロジェクトに取り組むためのものです）。私はそれをSPAにしており、フォールバックを設定することに煩わされていません。控えめなJavaScriptを使用すると、SPAの概念にかけるワークロードがほぼ2倍になります。Knockout、Jqueryなどの最新のJavaScriptライブラリでは、すべてのサイトが簡単に「煩わしくない」とは限らないことを受け入れなければなりません。JavaScriptはWebの未来です。
— lassombra 2013年
5
@Yarin PHP / JSアプリを構築して、私がフォールバックすることは決してありません...それが私に連絡する誰かのために機能しない場合、私は彼らに過去の生活をやめてJSを有効にするように言います。
— 2016年
2
@ n611x007-サーバー側でもクライアント側でも、非倫理的なものはすべてのコード、すべてのデバイスに隠れています。そのコードの誤りではなく、その人間の責任です。あなたはまだサードパーティのISPを使用してインターネットに接続している、まだサードパーティのハードウェア/ファームウェアを備えたコンピューターを使用している、サードパーティのインジェクトからアクセス可能な安全でない携帯ネットワークを使用している、まだ使用している携帯電話を所有しているため、JS皮肉に対するキャンペーンを見つけましたサードパーティ製のパッチが適用されていないOS、サードパーティ製のワイドオープンアップデートサービスなどを使用するフラットスクリーンテレビなどを使用します。ブラウザでJSをオフにするかどうかに関係なく、常にMITMっぽいチャンネルの犠牲になります。
— dhaupin
35

<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を試して使用することです。機能する場合は有効になり、機能しない場合は無効になります...

— de Raad
ソース
1
XHTML。それらは日々でした...物事は大きく変化しました：developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
— Stephan Weinhold
jqueryを使用する理由...
— Luis Villavicencio
@ StephanWeinhold、JSFはXHTMLを使用します。
— アラッシュ
34

本文で.no-jsクラスを使用し、.no-js親クラスに基づいて非JavaScriptスタイルを作成します。JavaScriptが無効になっている場合、JavaScript以外のすべてのスタイルが取得されます。JSサポートがある場合は、.no-jsクラスが置き換えられ、通常どおりすべてのスタイルが提供されます。

 document.body.className = document.body.className.replace("no-js","js");

HTML5ボイラープレートで使用されるトリックhttp://html5boilerplate.com/ modernizrを通じてですが、JavaScriptの1行を使用してクラスを置き換えることができます

noscriptタグは大丈夫ですが、CSSで実行できるのに、なぜHTMLに余分なものがあるのですか

— Grundizer
ソース
5
誰かが.nojsクラスに言及するまでにこれほど長い時間がかかったなんて信じられません！これは最もシームレスなアプローチの1つであり、noscript恥ずべきことです。
— モーセ
15

ちょっとタフだけど（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以外のソリューションを知っている人はいますか？

— ボレル
ソース
13

単純なJSスニペットを使用して、非表示フィールドの値を設定できます。ポストバックすると、JSが有効かどうかがわかります。

または、すばやく閉じるポップアップウィンドウを開こうとすることもできます（ただし、表示される場合があります）。

また、JSが無効になっているブラウザにテキストを表示するために使用できるNOSCRIPTタグもあります。

— rslite
ソース
これは良い答えではありません。最初のソリューションでは、ページの再読み込みとフォームの送信が必要です。2番目のソリューションは、ポップアップ（ack！）を開き、それを「迅速に」閉じます-クライアント側からですか？-1
— ベン
サイトでJSが有効になっているかどうかについてサーバー側を知る必要がある場合があるため、何かをポストバックする以外にどのように実行できるかわかりません。ポップアップが見苦しいことに同意します。これについてはよくわかりませんが、ユーザーが邪魔されないように、画面の表示領域外にポップアップを開くことができるはずです。エレガントではありませんが、動作し、ページの再読み込みはありません。
— rslite
スパムボットは隠しフィールドにも投稿します。
— Janis Veinbergs、2011年
13

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>
— anon
ソース
12

noscriptタグは適切に機能しますが、基本的にnoscriptはクライアント側のチェックであるため、無駄なJSファイルの提供を続けるには、追加のページ要求が必要になります。

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

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

追加のHTTPリクエストによってページのレンダリングが遅くならないように、このチェックをページの末尾近くのどこかに含めることをお勧めします。

— デビッドウィーズ
ソース
12

これを各ページの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>

ジェイのおかげで。

— the_seeker_who
ソース
12

私は常にブラウザに注目に値する何かを与えたいので、私はこのトリックをよく使用します。

1つ目は、JavaScriptを正しく実行する必要があるページの部分（getElementById呼び出しなどで変更されるパッシブHTML要素を含む）は、JavaScriptが利用できないことを前提として、そのまま使用できるように設計されています。（存在しないかのように設計されています）

JavaScriptを必要とする要素はすべて、次のようなタグ内に配置します。

<span name="jsOnly" style="display: none;"></span>

次に、ドキュメントの最初で、.onloadまたはdocument.readyのループ内で、JS依存要素をオンに戻すgetElementsByName('jsOnly')ように設定.style.display = "";します。そうすれば、非JSブラウザーは、サイトのJS依存部分を表示する必要がなくなり、それが表示されていれば、準備ができるとすぐに表示されます。

この方法に慣れたら、コードをハイブリッド化して両方の状況を処理するのは非常に簡単ですが、今はnoscriptタグを試してみて、いくつかの追加の利点があることを期待しています。

— ブライアン
ソース
10

これは、「クリーンな」ソリューションIDの使用方法です。

<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>
— Alpha2k
ソース
9

一般的な解決策は、次のように、メタスクリプトを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秒でWebサイトのホームページにリダイレクトされます。さらに、パラメータjavascript = falseもサーバーに送信します。

その後、node.jsやPHPなどのサーバー側スクリプトはパラメーターを解析し、JavaScriptが無効になっていることを知ることができます。次に、JavaScript以外の特別なバージョンのWebサイトをクライアントに送信できます。

— ウメシュパティル
ソース
8

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

noscriptなど、最初のリクエストでjavascriptが無効になっていると表示される可能性がありますが、今後のリクエストでは有効になるように注意してください。

— Joel Coehoorn
ソース
5

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

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

— ブラッド8118
ソース
4

私が過去に使用したテクニックは、JavaScriptを使用して、JavaScriptが有効であることを示すフラグとして機能するセッションCookieを記述することです。次に、サーバー側のコードがこのCookieを探し、見つからない場合は適切なアクションを実行します。もちろん、この手法はCookieが有効になっていることに依存しています。

— ジョン・トップリー
ソース
4

noscriptタグに画像タグを挿入して、サイトの回数とこの画像が読み込まれた頻度の統計を見ることができると思います。

— ミスターボレー
ソース
4

人々はすでに、検出に適したオプションの例を投稿していますが、「ブラウザでJSが有効になっていないとサイトが正しく機能しないことを警告する」という要件に基づいています。基本的には、ページに何らかの方法で表示される要素、たとえば、バッジを獲得したときにStack Overflowの「ポップアップ」に適切なメッセージを追加し、ページが読み込まれるとすぐに実行されるJavascriptでこれを削除します（ページ全体ではなくDOMを意味します）。

— ロリフ
ソース
3

何でそれを検出しますか？JavaScript？それは不可能でしょう。ロギングの目的でのみ必要な場合は、ある種の追跡スキームを使用できます。各ページには、特別なリソース（おそらく非常に小さいgifか類似のもの）を要求するJavaScriptがあります。これにより、一意のページリクエストとトラッキングファイルのリクエストの違いを理解することができます。

— ハンク・ゲイ
ソース
3

JSが有効な場合にのみ起動するハイジャックされたonClick（）イベントハンドラーを配置して、クリック/選択されたURLにパラメーター（js = true）を追加するだけではどうですか（ドロップダウンリストを検出することもできます）値を変更します-非表示のフォームフィールドを追加します）。したがって、サーバーがこのパラメーター（js = true）を見ると、JSが有効になっていることがわかり、サーバー側で高度なロジックを実行します。
これの欠点は、ユーザーが初めてサイト、ブックマーク、URL、検索エンジンで生成されたURLにアクセスしたときに、これが新しいユーザーであることを検出する必要があるため、URLに追加されたNVPを検索しないでください。そしてサーバーは、ユーザーがJSが有効/無効かどうかを判断するために、次のクリックを待つ必要があります。また、もう1つの欠点は、URLがブラウザURLで終了し、このユーザーがこのURLをブックマークすると、ユーザーがJSを有効にしていない場合でも、js = true NVPになりますが、次のクリックでサーバーがユーザーがまだJSを有効にしているかどうかを知るのは賢明です。ため息..これは楽しいです...

— FirstSOURCE
ソース
3

ユーザーにJavaScriptを有効にするように強制するため、各リンクの 'href'属性を同じドキュメントに設定します。これにより、ユーザーにJavaScriptを有効にするか、Firefoxをダウンロードするよう通知します（JavaScriptを有効にする方法がわからない場合）。実際のリンクURLをリンクの 'name'属性に格納し、 'name'属性を読み取り、そこにページをリダイレクトするグローバルonclickイベントを定義しました。

これは少しファシストですが、私のユーザーベースではうまく機能します;）。

— ヤン・サヒン
ソース
また、ユーザーがJSを有効にしていて、プログレッシブJavaScriptが起動する前にリンクをクリックすると少し煩わしい
— Simon_Weaver
1
確かに、まだ問題は報告されていません。
— Jan Sahin
3

ユーザーがJavaScriptを無効にしているかどうか（サーバー側またはクライアント）を検出しません。代わりに、JavaScriptが無効になっていると想定し、JavaScriptを無効にしてWebページを作成します。これにより、の必要性がなくなりnoscriptます。これは、正しく機能せず、不要であるため、とにかく使用しないでください。

たとえば、サイトを構築して、 <div id="nojs">This website doesn't work without JS</div>

その後、スクリプトはdocument.getElementById('nojs').style.display = 'none';通常のJSビジネスを実行します。

— 爆発の丸薬
ソース
これは優れたシームレスなアプローチです。<noscript>タグは、cssファイルを介してnoscriptのスタイルを維持できるこのアプローチでは、さまざまなページで維持するのがはるかに困難です。
— zadubz 2013
3

ここで紹介した純粋なサーバー側ソリューションを使用してCookieを確認し、次にJquery.Cookieを使用してCookieをドロップすることでJavaScriptを確認し、この方法でCookieを確認します。CookieとJavaScriptの両方を確認します。

— revs pouya
ソース
3

場合によっては、逆方向に実行するだけで十分な場合もあります。javascriptを使用してクラスを追加します。

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

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

これにより、複雑なメンテナンスの問題が発生する可能性がありますが、これは、いくつかの単純な修正です。ロードされていないときを検出するのではなく、ロードされたときに従ってスタイルを設定します。

— ジェニファー・ミシェル
ソース
3

私のソリューションを追加して、全ユーザーに対してJavaScriptを無効にして、実際のユーザーがサイトにアクセスした実際のユーザー数に関する信頼できる統計を取得します。チェックはセッションごとに1回だけ実行され、次の利点があります。

  • 100ページまたは1ページだけを訪問するユーザーは、それぞれ1カウントされます。これにより、ページではなく、単一のユーザーに焦点を合わせることができます。
  • とにかくページフロー、構造、またはセマンティックを壊さない
  • ユーザーエージェントをログに記録できます。これにより、通常はJSが無効になっているgoogle botやbing botなどの統計からボットを除外できます。IP、時間なども記録できます...
  • セッションごとに1つのチェック（最小限のオーバーロード）

私のコードはajaxでPHP、mysql、jqueryを使用していますが、他の言語にも適応できます。

次のようにDBにテーブルを作成します。

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()) . "'");
— Unbroken
ソース
3

私はcssとjavascript自体を使用する別のアプローチを見つけました。
これは、クラスとIDをいじくり始めるためのものです。

CSSスニペット：
1. css IDルールを作成し、＃jsDisという名前を付けます。
2.「content」プロパティを使用して、BODY要素の後にテキストを生成します。（あなたはあなたが望むようにこれをスタイルすることができます）。
3 2番目のcss IDルールを作成し、＃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. getElementByIdを使用してBODY IDを取得し、それを変数に割り当てます。
3. JS関数 'setAttribute'を使用して、BODY要素のID属性の値を変更します。

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

HTML部分。
1. IDが#jsDisのBODY要素属性に名前を付けます。
2.関数名を指定してonLoadイベントを追加します。（jsOn（））。

<body id="jsDis" onLoad="jsOn()">

BODYタグに#jsDisのIDが付与されているため：-JavaScript
が有効になっている場合は、BODYタグの属性が自分で変更されます。
-JavaScriptが無効になっている場合、CSSの「コンテンツ：」ルールテキストが表示されます。

#wrapperコンテナ、またはJSを使用するDIVで遊ぶことができます。

これがアイデアを得るために役立つことを願っています。

— クリスペソア
ソース
2

noscript内のメタに更新を追加することはお勧めできません。

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

  2. 属性値 "Refresh"は標準ではないため、使用しないでください。「更新」は、ユーザーからページの制御を奪います。「更新」を使用すると、W3CのWebコンテンツアクセシビリティガイドラインでエラーが発生します ---参照http://www.w3schools.com/TAGS/att_meta_http_equiv.asp。

— ガウラフ・タルワール
ソース
XHTMLについては何も言われていません。<noscript>は完全に有効なHTML 4.01 strictです。
— トム・
2
noscriptはXHTML 1.0とXHTML 1.1でも完全に有効です。メタ要素を含めることはできません。プログレッシブエンハンスメントを優先して回避する必要がありますが、これは言語の一部です。
— クエンティン、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.