1

JavaScript を使用せずに Web ページを開くとすぐに、<noscript>タグ内のフォームがコードとして表示されますが、一度更新すると問題ないようです。JavaScript を無効にした直後にフォームを適切に表示する方法はありますか、または JavaScript が有効になっていないときにページをロードした直後にページをリロードする方法はありますか?

メタ リフレッシュを使用してみましたが、JavaScript を使用せずに 1 回だけリロードする方法がわかりません。

コードは次のとおりです。

<div id="JS" class="span4" style="display: none">
<h2 class="side">contact</h2>
<h3 class="side">message</h3>
<br><br>

                <form id="animate" >
                    <input id="name" name="Name" type="text" value="" placeholder="Your Name" maxlength="25" >
                    <input id="email" name="Email" type="text" value="" placeholder="Your E-mail" maxlength="100">
                    <textarea id="Message" name="Message" placeholder="Your Message" spellcheck="true" rows="6"></textarea>
                    <input id="spam" type="text" name="spam" style="display: none;" value=""/>
                    <input id="submit" type="submit" name="submit" value="Submit"/>
                </form>
                <div style="color: black; font-family: urwgroteskregular;" id="thanks">
                    <h2> Thank you, your message has been received.</h2>
                </div>
            </div>
            <div class="span4" id="noScript">
                <noscript>
                    <h2 class="side">contact</h2>
                    <h3 class="side">message</h3>
                    <br><br>
                    <form action='process.php' method="post" >
                        <input name="Name" type="text" value="" placeholder="Your Name" required="" maxlength="25">
                        <input  name="Email" type="text" value="" placeholder="Your E-mail" required="" maxlength="100">
                        <textarea  name="Message" placeholder="Your Message" spellcheck="true" rows="6" required=""></textarea>
                        <input  type="text" name="spam" style="display: none;" value=""/>
                        <input type="submit" name="submit" value="Submit"/>
                    </form>
                </noscript>

            <script type="text/javascript">

                document.getElementById('JS').style.display = 'block';
                document.getElementById('noScript').style.display = 'none';

            </script>
4

4 に答える 4

0

これは、noscript タグ内に不正な形式の html がある場合に発生する傾向があることがわかりました。

<noscript>
  <img src="image.jpg" />
</noscript>

それ以外の：

<noscript>
  <img src="image.jpg" >
</noscript>

がこれを引き起こしているようですが、少なくともすべての主要なブラウザでは、no script タグ以外の問題は発生していないようです。

noscriptタグ以外のものを使用する上記の回答については。簡単なことをするのにモデナイザーの途方もなく大量のコードを忘れてしまいます!

class="noscript" で div を使用し、デフォルトで他のすべてを非表示にしてから、script を使用して noscript div を非表示にし、他の js 対応コンテンツを表示できます。
これには、js 対応のブラウザーがスクリプトをダウンロードできない場合にも機能するという利点があります。これは、さまざまな理由で発生する可能性があります。このアプローチの欠点は、ブラウザーで js が有効になっている場合でも、img タグなどの外部コンテンツがブラウザーのプリローダーによってダウンロードされることです。そのため、noscript タグの方が適しています。もちろん、最善のアプローチは、あなたが何をしているかによって異なります

于 2014-12-16T03:33:27.213 に答える
0

no-jsほとんどの人は、クラスを HTML に配置し、それを削除して置き換えるModernizr ライブラリを含めることで、この問題に対処しています。jsこのようにして、次の CSS を含めることができます。

html.js #noScript {
  display: none;
}

…そして、スクリプト化されたブラウザは 2 番目のフォームを表示しません。

Modernizr のすべてを含めたくない場合は、HTML に次のクラスがあることを確認してください。

<html class="no-js">

次に、次のコードを に含めます<head>。

void function addScript(){
  var html = document.lastChild;
  html.className = html.className.replace('no-js','js');
}();

スクリプト化されたブラウザーは、このスクリプトを読み取って実行し、クラスを置き換えます。これで、スクリプト化されたブラウザーのみを対象とするように CSS を調整できます。

html.js #noScript {
  display: none;
}

並びました！ページにフォームをレンダリングさせ、後で JS で削除する必要はありません。にネストする必要はありません<noscript>。スクリプトの存在に応じて、単に表示するかどうかを指定します。この手法の優れた点は、クラスを拡張したり、要素に追加して表示する状況を指定しjs-onlyたりno-js-onlyできることです。

于 2013-06-05T17:08:09.183 に答える