2

私の知る限り、JavaScriptが無効になっているとウェブサイトが正常に動作することが重要です。javascriptスクリプトのサポートとサポートしていないウェブサイトの設計

私の意見では、このようなウェブサイトをデザインする方法を考える方法の1つは、ホームページでjavascriptを検出し、javascriptコードではない別のバージョンのウェブサイトにリダイレクトすることができ、

私が念頭に置いているもう1つの方法は、たとえば、WebページのダイアログボックスでX(閉じるボタン)を考えることです。 JavaScriptの干渉を受けずにXを押すと、サーバーにリクエストが送信され、サーバー側では、次にページをレンダリングするダイアログが表示されなくなります。また、リンクのonclickにjavascript関数をバインドします。 javascriptを有効にすると、即座にダイアログが非表示になります。

あなたはこれについてどう思いますか?両方をサポートするためにウェブサイトをどのようにデザインしますか?

+1

プロジェクトが要求する場合にのみ重要です。多くの複雑なプロジェクトでは、noscript環境をサポートすることは、開発/ QA時間と必要な予算を2倍以上にするため、オプションではありません。 –

+0

が合意した、面白いことは、stackoverflowがjavascriptなしで動作しないということです!私は答えを受け入れることも、それを使わないでコメントを追加することもできません。 – EBAG

答えて

12

これに対処する1つの方法はにある:

  • まず、サイトを作成し、任意のJavaScriptの
  • なし
  • そして、すべての作品は、この方法で、適切な

のjavascript機能拡張を追加JSが無効になっていると、サイトの「最初の」バージョンがまだ動作しています。

あなたはCSSとまったく同じことを行うことができ、自然に - それぞれの日は

^^ウェブサイトがCSSなしでどのように見えるか


一例を示す、一つでも「CSS Naked Day」がありますか?

  • あなたは、サーバーによって、サーバーへのPOSTデータが提出されていること、標準のHTMLフォーム、およびページの再作成を持っているあなたは、その後、いくつかのJSを追加「subscrivingに感謝」
  • のようなメッセージが表示されます+ Ajax stuff:フォームの送信中にページ全体をリロードするのではなく、データのみを送信するAjaxリクエストを行います。ページをリロードせずに「お返事ありがとうございます」と表示されます

この場合、JavaScriptが無効になっている場合、最初の「標準的な」やり方は引き続き機能します。

これはあなたが目指しているものProgressive enhancement

+2

本当のトリックは、狂った新機能ですばやくサイトを更新するためにあらゆる側面から圧力をかけられているときに、そのプログレッシブエンハンスを維持しています。あなたの銃に固執する。これが前進の道です。 –

+0

本当に...悲しいことに:-((よく、圧力と漸進的な強化部分を維持するのは難しい) –

2

普通の方法はprogressive enhancementです。

基本的には、通常のフォームを使用して簡単なHTMLウェブサイトを利用します。
次のエンハンスメントはCSSです。
さらに、Javascriptを使って要素を追加または削除したり、エフェクトを追加したりすることができます。

基本的なHTMLは、古いブラウザ(またはスクリプトブロッカーがあるブラウザなど)には常に存在します。

たとえばコメントを投稿するためのフォームは、次のようになります。

<form action="post-comment.php" method="post" id="myForm"> 
<input type="text" name="comment"> 
</form> 

次に、あなたはそれがAJAXy

$('#myForm').submit(...); 

理想的にはAJAXコールバックが同じを使用する必要があります作るためにJavaScriptを使用して、それを向上させることができますpost-comment.phpとしてのコード - 同じファイルを呼び出すか、include経由でコードを複製する必要はありません。

+1

じゃあ、あなたは私よりも速かった^^(しかし私はもっと書きました:-p)素敵な仕事! –

1

と呼ばれるもの(の一部)であるprogressive enhancementです。 JavaScriptを使わずにサイトを設計し、JavaScriptのイベントをjQueryなどのライブラリから追加して、サイトの動作がプレゼンテーションとは完全に分離されるようにすることで、この問題に取り組んでいきます。こうすることで、ブラウザでJavaScriptを有効にしている人とそうでない人のために、より高度な機能を提供できます。

2

最も良い方法は、JSなしで適切に動作するページを設計することです。

window.onload = function() { 
    // Do DOM manipulations to add JS functionality here. For instance... 
    document.getElementById('someInputField').onchange = function() { 
     // Do stuff here that you can't do in HTML, like on-the-fly validation 
    } 
} 

研究jQuery例:次に、このようなコードで<体>部の底部に<スクリプト>ブロックを追加します。彼らはこのような多くのことを示しています。これは「邪魔されないJavaScript」と呼ばれています。より多くの例を見つけるためのGoogle。

EDIT:上記のjQueryのバージョンは次のとおりです。

$(document).ready(function() { 
    // Do DOM manipulations to add JS functionality here. For instance... 
    $('#someInputField').change(function() { 
     // Do stuff here that you can't do in HTML, like on-the-fly validation 
    }); 
}); 

私は、標準のDOM操作対のjQueryの下冗長性を表示するには、これを追加しました。 window.onloadとdocument.readyの間には小さな違いがあり、jQueryのドキュメントとチュートリアルで説明しています。

2

プログレッシブエンハンスメント、study jqueryを使用して理解してください。あなたの周りに頭を浮かべるまでには時間がかかります。たとえば、あなたのアイデア:

ホームページ でJavaScriptを検出し、それが有効になっていない場合はリダイレクトが javascriptのないコードを行い、 純粋なHTMLで動作するウェブサイトの別のバージョンを する

方法でしょうあなたはjavascriptが無効になっているかどうかを検出しますか? javacriptではなく、obivously ...

あなたは間違った方法でラウンドを考えている:最も基本的なバージョンはデフォルトのバージョンでなければならず、より高度な機能を検出すると、それらを使用することができます。

できるだけ長い間、さまざまなバウサー/機能の別バージョンを避けてください。すべてのバージョンを同期して最新の状態に保つことは大変な作業です。

いくつかの良いressourcesはあなたが始めるために:用語で

2

を、JavaScriptを使用して、あなたのサイトの作品が無効にすることが重要ではありません。 JavaScriptを無効にしている人は、あなたのサイトにバグをハックしたい人です。正しくナビゲートする必要はありません。あなたと一緒にあなたの努力を無駄にしないでください。 JavaScriptがなければWebは安全ではないと誰もが知っています。

フォームには注意が必要です。JavaScriptのフィルタは絶対に信用しないでください。常にサーバー側で再度フィルタリングしてください。常に!

関連する問題