1

一旦我在没有 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>
4

4 回答 4

1

我不知道是什么导致了这个<noscript>问题，但我知道你用这种方法走错了路。

查看输入表单的两个版本——除了这些不同之外，它们是相同的：

  • 脚本版本在及其元素上添加了id属性。<form>
  • 该<noscript>版本将action和method属性添加到<form>, 和required几个元素的属性。

您应该做的是拥有此表单的单个实例并将其用于两个目的。添加来自两个版本的表单的所有属性。id在没有 JS 的情况下，这些属性不会有任何伤害，当您使用 JavaScript 处理提交时， action/method和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>有“谢谢” <div>，但您可以根据需要使用其他答案中建议的技术隐藏和显示这些。

于 2013-06-05T18:56:07.050 回答
0

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

<html>
<head>
<script>
document.write('<style>.nonjs { display:none}</style>');
<script>
于 2013-06-05T16:57:23.483 回答
0

no-js大多数人通过将类放在他们的 HTML 中来处理这个问题，并包括Modernizr 库，它将它删除并替换为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可以添加到元素中以指定它们应该在哪种情况下显示，等等。

于 2013-06-05T17:08:09.183 回答
0

我发现当您在 noscript 标记中使用格式错误的 html 时，往往会发生这种情况，例如将 html 与 xhtml（坏习惯）混合，例如与 html 文档类型为 html 的 html 页面：

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

代替：

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

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

至于上述使用 noscript 标签以外的东西的答案。忘记modenizer可笑的大量代码来做一些简单的事情！

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

于 2014-12-16T03:33:27.213 回答