JavaScript スクリプトのサポートと非サポートの両方を考慮した Web サイトの設計

StackOverflow https://stackoverflow.com/questions/1284899

質問

ウェブサイトが JavaScript を無効にしても正常に動作することが重要であることはわかっています。

私の意見では、このような Web サイトをどのようにデザインするかを考え始める 1 つの方法は、ホームページで JavaScript を検出し、それが有効になっていない場合は、JavaScript コードを含まず純粋な HTML (Gmail など) で動作する別のバージョンの Web サイトにリダイレクトすることです。

私が考えているもう 1 つの方法は、たとえば、Web ページ上のダイアログ ボックスの X (閉じるボタン) を思い浮かべてください。JavaScript の干渉なしに X を押すとサーバーにリクエストが送信され、サーバー側では次回ページをレンダリングするときにそのダイアログを非表示にし、さらに JavaScript 関数をリンクの onclick にバインドした場合はどうなるでしょうか。 JavaScript を有効にすると、ダイアログが即座に非表示になります。

これについてどう思いますか?両方をサポートする Web サイトをどのようにデザインしますか?

役に立ちましたか？

解決

これに対処する 1 つの方法は次のとおりです。

  • まず、JavaScript を使用せずにサイトを作成します
  • すべてが機能したら、必要に応じて JavaScript の拡張機能を追加します。

こうすることで、JS が無効になっている場合でも、サイトの「最初の」バージョンは引き続き機能します。

もちろん、CSS でもまったく同じことができます。"CSS 裸の日" 毎日、CSS なしで Web サイトがどのように見えるかを示しています ^^


一例でしょうか？

  • 標準の HTML フォームがあり、送信時にデータをサーバーに POST し、サーバーによってページが再作成されると、「購読してくれてありがとう」のようなメッセージが表示されます。
  • 次に、JS + Ajax のものをいくつか追加します。フォームの送信中にページ全体をリロードする代わりに、データのみを送信する Ajax リクエストを実行します。その代わりに、ページをリロードせずに「購読していただきありがとうございます」と表示されます。

この場合、JavaScript が無効になっている場合でも、最初の「標準」方法が機能します。

これはいわゆるもの（の一部）です 段階的な強化

他のヒント

通常の方法はプログレッシブ・エンハンスメントのと呼ばれるものです。

基本的には通常のフォームで、簡単なHTMLのウェブサイトを取る。
次の拡張機能は、CSSです - あなたはそれが良い見えるよう
。 そして、あなたはJavascriptでそれをさらに高めることができる - 。あなたが追加したり、要素を削除し、エフェクトの追加などができます。

基本的なHTMLは、（例えば、またはスクリプトブロッカーを持つもの）古いブラウザのためにそこに常にます。

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

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

次に、あなたはそれAJAXyを作るためにJavaScriptでそれを向上させることができます。

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

理想的にはAJAXコールバックは、ポストcomment.phpと同じコードを使用する必要があります - 。同じファイルを呼び出すかincludeのいずれかを介して、あなたはコードを複製する必要はありません。

つまり、JavaScript を無効にしてもサイトを動作させることは重要ではありません。JavaScript を無効にする人はサイトにバグを侵入させようとする人であり、サイトを正しく操作する資格はありません。彼らとの努力を無駄にしないでください。JavaScript なしでは Web をサーフィンできないことは誰もが知っています。

注意しなければならない唯一のことは、フォームについてです。JavaScript のフィルターを決して信頼しないでください。 必ずサーバー側で再度フィルタリングしてください。

プログレッシブエンハンスメントを使用して、研究してください jQuery それを理解するために。頭に入ってくるまでには時間がかかります。たとえばあなたのアイデア:

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

JavaScriptが無効になっているかどうかをどのように検出しますか?明らかに JavaScript ではありません...

あなたは間違った考え方をしています:最も基本的なバージョンはデフォルト バージョンである必要があり、より高度な機能が検出された場合は、それらを使用できます。

できる限り、異なるクッパ/能力に対して個別のバージョンを使用しないようにしてください。すべてのバージョンを同期して最新の状態に保つのは大変な作業です。

開始するための優れたリソース:

最善の方法は、JSせずに適切に動作しますページを設計することです。次いで、の下に

scroll top