Javascriptが利用できない場合にコンテンツを表示し、javascriptが利用可能な場合はコンテンツを非表示にし、どちらの場合でもちらつきません。

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

質問

配送オプション用のシンプルなフォームがあり、誰かがドロップダウンリストから新しいオプションを選択すると、JavaScriptを使用してフォームを自動送信します。

javascriptのないブラウザをサポートするために、フォームを送信するボタンもあります。このボタンは、javascriptを使用して非表示になります。

ただし、これは私のボタンが短時間表示されることを意味し、残りのコンテンツが再フォーマットされるとちらつきが発生する可能性があります。

誰もがボタンを作成する方法を提案できるので、非表示で起動しますが、javascriptが利用できない場合にのみ表示されますか？たとえば、display：noneで開始します。魔法のようにdisplay：blockに変更します。 javascriptがない場合にのみ。

役に立ちましたか？

解決

<noscript> ... </noscript>タグ内に何かを置くだけで、JavaScriptが有効になっていない/利用できない場合にのみ表示されます。

他のヒント

どのように非表示にするかによって異なりますが、DOM対応またはウィンドウ対応のどちらを使用していますか？ Window Readyは、すべての画像がダウンロードされるのを待ちます。これは通常、長すぎます。

アクセシビリティのため、理由として、ロードされたDOMで非表示にします。ただし、表示されないようにするには、noscript要素に入れます

<noscript>
    <input type="submit" />
</noscript>

最後の段落については、JavaScriptがないとそのようなことは起こりません。

控えめなjavascriptを書くだけです： http://icant.co .uk / articles / seven-rules-of-unobtrusive-javascript / 。

ページを通常のページとして記述しますが、下部のコードを使用してjavascriptを開始し、ページの編集を開始してよりインタラクティブにします。この利点は、JavaScriptがオフになっている場合、ページは正常ですが、オンになっている場合は、より多くの機能を追加できることです。

このオプションの大ファンではありません。これは、不要なコードをダウンロードする必要があるためです。

このページでコメント5を見ると、実際に何かが表示される前に変更を加えることができる優れたソリューションがあります。 http://dean.edwards.name/weblog/2006/06/again/

送信ボタンの前後にスクリプトを使用して、非表示のdiv要素の開始タグと終了タグを書き込むことができます。

1つのオプションは、表示されたボタンから開始し、JavaScriptからCSSを変更することです。

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

ボタンの代わりにスタイルシートを変更する（およびこのコードをonloadの外側に 配置する）と、ボタンが描画される前にスタイルシートが非表示になります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top