web-dev-qa-db-ja.com

<noscript>要素を使用するべきではありませんか?

私はここでいくつかの良い短所を見つけました:

  • Noscript要素は、ブラウザでJavaScriptが有効になっているかどうかのみを検出します。ブラウザではなくファイアウォールでJavaScriptが無効になっている場合、JavaScriptは実行されず、noscript要素のコンテンツは表示されません。

  • 多くのスクリプトは、実行できるようにサポートされている言語の特定の機能に依存しています(たとえば、document.getElementById)。必要な機能がサポートされていない場合、JavaScriptは実行できませんが、JavaScript自体がサポートされているため、noscriptコンテンツは表示されません。

  • Noscript要素を使用する最も便利な場所は、ページが読み込まれるまで待機するのではなく、ページの読み込み中にページに適用されるスタイルシートとメタ要素を選択的に決定できるページの先頭です。残念ながら、noscript要素はページの本文内でのみ有効であるため、headでは使用できません。

  • Noscript要素はブロックレベルの要素であるため、JavaScriptが無効になっている場合にのみコンテンツのブロック全体を表示するために使用できます。インラインで使用することはできません。

  • 理想的には、WebページはコンテンツにHTML、外観にCSS、動作にJavaScriptを使用する必要があります。 noscript要素を使用すると、JavaScriptから動作を適用するのではなく、HTML内から動作を適用します。

ソース: http://javascript.about.com/od/reference/a/noscriptnomore.htm

最後の点に非常に同意します。外部<noscript>ファイルを作成および追加する方法はありますか? <noscript><head>に配置する必要がありますか?

67
Jitendra Vyas

デフォルトを非javascriptにして、javascriptが有効なページでjavascriptコードを上書きする方が良いでしょう。それほど多くする必要はありません。単にdisplay:none;ブロック。その後、display:block; javascriptによる、およびその逆、非jsページの場合。

44
Tor Valamo

何日も熟考し、コードを前後に変更した後、私は今より明確な画像を持っていると思います。

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

状況に応じて、考慮すべき3つのケースがあります。

ケース1-必要なスクリプトがインラインの場合

JavaScriptが無効

  • <noscript>要素のコンテンツはすぐに表示され、非jsコンテンツが表示されます
  • <div>要素のコンテンツはすぐに表示され、非jsコンテンツが表示されます

JavaScriptが有効

  • <noscript>要素のコンテンツはまったく表示されず、jsコンテンツが表示されます
  • <div>要素のコンテンツは、非表示になる前に一時的に表示されることがあり、jsコンテンツが表示されます

この場合、<noscript>要素を使用すると便利です。

ケース2-必要なスクリプトが外部(サードパーティ)ソ​​ースからのものであるが、<div>要素の非表示がインラインスクリプトで行われる場合

JavaScriptが無効

  • <noscript>要素のコンテンツはすぐに表示され、非jsコンテンツが表示されます
  • <div>要素のコンテンツはすぐに表示され、非jsコンテンツが表示されます

JavaScriptは有効ですが、必要なスクリプトはブロックされています

  • <noscript>要素のコンテンツはまったく表示されず、何も表示されません!
  • <div>要素のコンテンツは、非表示になる前に一時的に表示される場合がありますが、何も表示されません!

JavaScriptが有効で必要なスクリプトが受信されます

  • <noscript>要素のコンテンツはまったく表示されず、jsコンテンツが表示されます
  • <div>要素のコンテンツは、非表示になる前に一時的に表示されることがあり、jsコンテンツが表示されます

この場合、<noscript>要素を使用すると便利です。

ケース3-必要な場合、スクリプトは<div>要素を非表示にします

JavaScriptが無効

  • <noscript>要素のコンテンツはすぐに表示され、非jsコンテンツが表示されます
  • <div>要素のコンテンツはすぐに表示され、非jsコンテンツが表示されます

JavaScriptは有効ですが、必要なスクリプトはブロックされています

  • <noscript>要素のコンテンツはまったく表示されず、何も表示されません!
  • <div>要素のコンテンツが表示され、js以外のコンテンツが表示されます

JavaScriptが有効で必要なスクリプトが受信されます

  • <noscript>要素のコンテンツはまったく表示されず、jsコンテンツが表示されます
  • <div>要素のコンテンツは、非表示になる前に一時的に表示されることがあり、jsコンテンツが表示されます

この場合、<div>要素を使用すると便利です。

要約すれば

HTMLコンテンツのレンダリングがサードパーティのスクリプトに依存する場合、または必要なスクリプトがインラインの場合は、<noscript>要素を使用します。それ以外の場合は、<div>要素を使用し、必要なスクリプトに以下が含まれていることを確認してください。

document.getElementById('noscript').style.display='none';
24

Tor Valamoにはこの問題に対するエレガントな回答がありますが、この手法の使用をオプトアウトする可能性がある問題があります。

問題は(通常)IEです。他のブラウザよりも少し遅くJSをロードして実行する傾向があり、JSをロードしてdivを非表示にする前に「JavaScriptを有効にしてください」divを一瞬フラッシュすることがあります。

迷惑です。これを回避するには、「クラシック」を実装します。 <noscript>リダイレクトアプローチ。

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

これは、このちょっと厄介なものに関して私が出会った中で最も堅実なテクニックです。

8
Steve Hemsley

私が見たnoscriptの便利なアプリケーションの1つは、重いコンテンツ(特に「スクロールせずに見える範囲」)の段階的に強化された非同期読み込みです。大きな画像やiframeなどをHTMLソースのnoscriptでラップし、DOMの準備ができたらJavaScriptを使用して、ラップされていない要素をページに追加できます。これにより、ページのブロックが解除され、特にドキュメントの準備が整った後に適用されるJS/JQインタラクションに依存している場合(2秒対私が相談したポートフォリオページの場合は6秒)、初期読み込みがはるかに速くなります。

7
Geordie Kaytes

最近では、ほとんどすべてのブラウザーがJavascriptを実行しているように見えますが、誰があなたのサイトにアクセスするのかを知ることはできません。最近では スクリーンリーダー および ウェブクローラー でもJavascriptを使用し、必要に応じてAJAXリクエストを作成します。

ただし、Javascriptを使用しない場合は、<noscript>タグよりもはるかに優れた方法があります。ドキュメントのHEADでこれを行うだけです:

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

この手法を使用すると、CSSのQ_jsクラスを簡単に参照して、物事を隠すことができます。 <noscript>タグを使用すると、以前のCSSをオーバーライドする追加のCSSファイルを含めることができます。これは、静的コンテンツを含む一部の要素が、Javascriptによってより動的になるまで(ちらつきではなく)すぐに隠されることになっている場合に重要になります。

要するに、私が提案したテクニックはあなたのすべての短所1-5に対処し、<noscript>を使用するよりも厳密に優れていると信じています。

5

(できれば近い将来) cssスクリプト を使用できるようになります:

@media (scripting: none) {
    /* styles for when JS is disabled */
}
2
Malvoz

シンプルなアイデアは、今回はあなたのウェブサイトがあなたのウェブサイトのコンテンツ全体のエンティティのようなnoscriptタグを使用して遅いデバイスでjavascriptの使用に適応しないかもしれない**(あなたのhtmlはjavascriptとすべてのコントロールは、javascriptがオフの場合も機能する必要があります。基本的なhtmlコントロールを使用するユーザーは、javascriptがアクティブだったときに以前に行ったことをすべて実行できます。したがって、<noscript></noscript>は、同じ結果=ユーザーがurl)を開く理由である問題を解決します。** JavaScriptが存在するかどうかに関係なく、ウェブサイトの機能は「同じ」であることがわかります。いずれの場合もjsが有効/無効です。たとえば、中国の低速デバイスでは、Samsung neo mini電話では、この方法で低インターネットトラフィックで遅延なしにWebサイトを実行できます。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

そしてこれについてもっと言うと.jsが無効になっているときに正しいnoscriptがトリガーのように機能するように考案されましたが、この機能を回避して、現在の状況に関するインターネット機能のコースを変更し、ダイナミクスを変更することができます....

1
Constantin

あるidを持つすべてのページに、高さ、幅、位置:固定divを作成します。

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

私は専門家ではありません。これは私のために働いた。申し訳ありませんが、この場合は、ユーザーが常にJavaScriptを有効にしたい場合にのみ適しています

0

「noscript」要素はXMLまたはXHTML5ポリグロットではサポートされていないため、W3Cでは推奨されていません。

また、すべてのページが、スクリプトなしの表示可能なdivで始まり、それがWebサイトのすべてのページのJavaScriptサーカストリックによって隠されるという考えも好きではありません。後の開発者によって変更された場合、失敗または大混乱を引き起こす可能性のある危険でよりスクリプトの依存関係。

より良い戦略は、すべての内部スクリプトコンテンツをラップする基本的なHTMLデザインでサイトをデザインし、ユーザーが少なくともヘッダーと基本コンテンツが表示される場所を含むページデザインを表示することです。空の場合はかなり明らかで、彼らは理由のためにコンテンツを見ることができません。次に、JavaScriptが無効になっているコンテンツが表示されない場合は、フッターに小さなメッセージまたは情報アイコンを追加します。スクリプト化されたコンテンツを見るかどうかに関係なく表示されます。このソリューションはスクリプトを使用しません。

最後の手段として、すべてのWebページの下部にあるdisplay:noneを使用して、スクリプトでメッセージを非表示にすることができます。

別のコンテンツやメッセージボックスを提供するほどセクシーではありませんが、重いAngular= Webサイトの場合、スクリプトを無効にすると、新しいコンテンツページを作成する必要があります。このソリューションもユーザーエージェントでのスクリプトサポートなしと無効なサポートを考慮し、noscriptタグを回避することで、Webページをすべてのユーザーエージェントと100%XMLおよびHTML5互換にします。

0
Stokely

すべてのものと同様に、仕事に適したツールを使用してください。

Google Maps APIを使用している場合、タグを介した静的な画像があり、動的なJSマップに置き換えられます。 Googleは最近、すべての課金を開始しました。したがって、上記の例では、静的と動的の2回のコストがかかります。静的マップは、JSが無効になっている場合にのみ関係します。したがって、二重の支払いを節約するための最善の解決策は、静的マップのタグをタグでラップすることです。

0
Peter