2

わかりました、JavaScript を無効にしてウェブサイトを正常に動作させることが重要であることは承知しています。

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

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

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

4

6 に答える 6

12

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

  • まず、JavaScript を使用せずにサイトを作成します
  • 次に、すべてが機能したら、適切な場所に JavaScript 拡張機能を追加します

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

もちろん、まったく同じことを CSS でも行うことができます。毎日 1 回「CSS Naked Day」があり、CSS なしで Web サイトがどのように見えるかを示します ^^


一例？

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

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

これはプログレッシブ エンハンスメントと呼ばれるもの (の一部) です。

于 2009-08-16T18:01:33.357 に答える
2

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

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

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

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

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

開始するためのいくつかの優れたリソース:

于 2009-08-16T18:13:18.290 に答える
2

つまり、JavaScript を無効にしてサイトを機能させることは重要ではありません。JavaScript を無効にする人は、サイトにバグを仕掛けようとする人であり、サイトを正しくナビゲートする資格がありません。彼らとの努力を無駄にしないでください。JavaScript なしでは Web を閲覧できないことは誰もが知っています。

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

于 2009-08-16T18:13:56.273 に答える
2

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

基本的に、通常のフォームを使用した単純な HTML Web サイトを使用します。
次の強化は CSS です。見栄えを良くします。
次に、Javascript を使用してさらに拡張できます。要素を追加または削除したり、効果を追加したりできます。

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

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

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

次に、JavaScriptで拡張してAJAXyにすることができます

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

理想的には、AJAX コールバックは post-comment.php と同じコードを使用する必要があります (同じファイルを呼び出すか、または を介し​​てinclude)。そうすれば、コードを複製する必要はありません。

于 2009-08-16T18:00:28.477 に答える
2

最良の方法は、JS なしで適切に機能するページを設計することです。次に、<body> セクションの下部に <script> ブロックを追加し、次のようなコードを追加します。

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 で検索してください。

編集: 上記の 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
   });
});

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

于 2009-08-16T18:02:22.323 に答える
1

あなたが目指しているのはプログレッシブエンハンスメントです。これについては、最初に JavaScript を使用せずにサイトを設計し、それが機能したら、jQuery などのライブラリを介して JavaScript イベントの追加を開始し、サイトの動作がプレゼンテーションから完全に分離されるようにします。このようにして、ブラウザーで JavaScript が有効になっているユーザーとそうでないユーザーに対して、より高いレベルの機能と洗練を提供できます。

于 2009-08-16T18:01:52.980 に答える