noscript标记中的文本将作为文本而不是形式输出

text inside noscript tags is being outputted as text and not form

本文关键字：文本 输出 noscript      更新时间：2023-09-26

一旦我打开我的网页没有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>

我不知道是什么导致了<noscript>的问题，但我知道你的方法是错误的。

查看两个版本的输入表单—除了以下不同之处，它们是完全相同的:

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

你应该做的是有一个单一的这个形式的实例，并将它用于这两个目的。添加来自两个版本的表单的所有属性。id属性在没有js的情况下不会有任何影响，action/method和required属性在使用JavaScript处理提交时也不会有任何影响。(就像往常一样，通过.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>

您的页面在<noscript>部分也有<h2>和<h3>标签，在脚本版本中有"谢谢"<div>，但您可以根据需要使用其他答案中建议的技术隐藏和显示这些标签。

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

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

大多数人处理这个问题的方法是把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添加到元素中，以指定它们应该在哪种情况下显示，等等。

我发现当你在noscript标签中有错误格式的html时，这种情况往往会发生，例如将html与xhtml混合(坏习惯)，例如html页面的doc类型为html:

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

代替:

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

似乎会导致这个问题，但是这似乎不会导致no script标签之外的问题，至少在所有主要浏览器中都是如此。

作为上述使用noscript标签以外的其他内容的答案。忘记moddenizer的荒谬的大量代码来做一些简单的事情!

你可以使用class="noscript"设置div，默认隐藏其他内容，然后使用script隐藏noscriptdiv并显示其他启用js的内容。
这样做的好处是，在启用js的浏览器无法下载脚本的情况下也可以正常工作，这种情况可能由于各种原因而发生。这种方法的缺点是，即使浏览器启用了js，像img标记这样的外部内容仍然会被浏览器预加载器下载，所以这就是noscript标记可以更好的地方。最好的方法当然取决于你在做什么

相关文章：