Question

只要我在没有JavaScript的情况下打开我的网页，<noscript>标签中的表单就会显示为代码，但在我刷新它之后，它似乎没问题。有没有一种方法可以在我禁用JavaScript后立即正确显示表单，还是有一种方法可以在加载JavaScript后立即重新加载页面？

我尝试过使用元刷新，但我不知道如何在不使用JavaScript的情况下重新加载一次。

这是代码：

<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>

Answer 1

我不知道导致<noscript>问题的原因是什么，但我确实知道你采用这种方法是错误的。

查看输入表单的两个版本 - 除了这些差异外，它们是相同的：

脚本版本在id及其元素上添加了<form>个属性。
<noscript>版本将action和method属性添加到<form>，将required属性添加到多个元素。

您应该做的是拥有此表单的单个实例，并将其用于这两个目的。添加表单的两个版本的所有属性。 {@ 1}}属性不会伤害任何JS案例中的任何内容，id / action和method属性在处理提交JavaScript。（只需像往常一样通过required来抑制普通表单提交。）

所以表格最终会像这样：

.preventDefault()

您的网页在<form id="animate" action="process.php" method="post" > <input id="name" name="Name" type="text" value="" placeholder="Your Name" required="" maxlength="25"> <input id="email" name="Email" type="text" value="" placeholder="Your E-mail" required="" maxlength="100"> <textarea id="Message" name="Message" placeholder="Your Message" spellcheck="true" rows="6" required=""> </textarea> <input id="spam" type="text" name="spam" style="display: none;" value=""> <input id="submit" type="submit" name="submit" value="Submit"> </form>部分中还有<h2>和<h3>个标记，脚本版本中也包含“谢谢”<noscript>，但您可以隐藏并显示这些标记根据需要使用其他答案中建议的技术。

Answer 2

为什么不使用js隐藏非js表单

<html>
<head>
<script>
document.write('<style>.nonjs { display:none}</style>');
<script>

Answer 3

大多数人通过将类no-js放在他们的HTML上来处理这个问题，包括Modernizr library，删除它并用js替换它 - 这样你就可以包含关注CSS：

html.js #noScript {
  display: none;
}

...脚本浏览器不会显示第二种形式。

如果您不想包含所有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添加到元素中以指定它们应显示在哪种情况中等。

Answer 4

我发现当你在noscript标签中包含格式错误的html时会发生这种情况，例如将html与xhtml（坏habbit）混合，例如将html页面与文档类型为html：

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

而不是：

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

似乎会导致这种情况，但这似乎不会导致无脚本标记之外的问题，至少在所有主要浏览器中都是如此。

关于使用除了noscript标签之外的其他内容的上述答案。忘记modenizer可笑的大量代码做一些简单的事情！

您可以使用带有class =“noscript”的div，默认情况下隐藏其他所有内容，然后使用脚本隐藏noscript div并显示其他启用js的内容。
如果启用了js的浏览器无法下载您的脚本，这样做的好处还在于，这可能由于各种原因而发生。这种方法的缺点是，即使浏览器启用了js，浏览器预加载器仍会下载img标记内的任何外部内容，因此noscript标记可以更好。最好的方法当然取决于你在做什么

noscript标签内的文本正在输出为文本而不是表单

4 个答案: