如果禁用 javascript，如何隐藏未被 <noscript> 标签包围的某些 html？答案

【问题标题】：How to hide certain html that is not surrounded by <noscript> tags if javascript is disabled?如果禁用 javascript，如何隐藏未被 <noscript> 标签包围的某些 html？
【发布时间】：2011-05-13 04:30:00
【问题描述】：

<html>

    <head>

        <script type="text/javascript">
         // jquery and javascript functions
        </script>

    </head>

    <body>

        <fancy-jquery-ajaxy-html-section>
        </fancy-jquery-ajaxy-html-section>

        <noscript>
        sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
        </noscript>

    </body>

</html>

我尝试用<script type="text/javascript"></script> 包围<fancy-jquery-ajaxy-html>，但随后即使启用了javascript 的用户也不会显示该部分中的任何内容。

但我想要做的是隐藏<fancy-jquery-ajax-html> 部分只有当用户没有启用javascript 时。

它包含对没有打开javascript的人无用的内容，因此根本不应该显示。

禁用了 javascript 的用户应该只看到一条消息，指出如果没有 javascript，该页面将无法查看。

有办法吗？

【问题讨论】：

标签： javascript jquery html ajax graceful-degradation

【解决方案1】：

最简单的方法是使用 CSS 隐藏该部分（例如 display:none），然后通过 Javascript 显示它。

编辑：只是一个小例子

<div>Everyone sees this div</div>

<div id="mydiv" class="hidden">You see this div only with JS enabled</div>

<script type="text/javascript">
    $("#mydiv").removeClass("hidden");
</script>
<noscript>
    <div>You will see this div only with JS disabled</div>
</noscript>

当然，在你的 CSS 中：

.hidden
  {
  display: none;
  }

【讨论】：

【解决方案2】：

我所做的是让我的 javascript 隐藏 nojsdiv 并显示 maindiv。这样，如果您没有 javascript，则会显示消息。

<body onload="allowlogin()">
    <div id="maindiv" style="visibility: hidden;">
...
    </div>
    <div id="nojsdiv">
        The training system requires javascript to be enabled.
    </div>
</body>

【讨论】：

【解决方案3】：

您可以使用 css 隐藏您喜欢的部分：

<div id="fancy_jquery_ajax" style="display: none;">
</div>

那么你可以使用 JavaScript 来显示元素：

$("#fancy_jquery_ajax").css("display", "block");

我希望这是对的，我实际上并没有那么多使用 jQuery。 :S

【讨论】：

没错（jQuery），但使用起来会更易读，比如.show() 而不是.css()。
啊，是的，那肯定会更好。

【解决方案4】：

另一种方法是使用 JavaScript 生成该 HTML，因此除非 JavaScript 正在运行，否则它不会出现。

【讨论】：

【解决方案5】：

我更喜欢在 jQuery 加载后立即将 .js 类添加到 html 标签。这允许我编写仅在用户启用/禁用 javascript 时适用的 css 规则。这使您的显示和隐藏代码远离我们的 JS，并让 CSS 完成其工作并为页面设置样式

我将如何解决您的问题：

<html>
  <head>
    <style type="text/css">
      .js #fancy_jquery_ajax {display: none;}
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
      $('html').addClass('js');
      $(document).ready(function() {
        // Stuff to do as soon as the DOM is ready
      });  
    </script>
  </head>
  <body>
      <div id = "fancy_jquery_ajax"></div>
      <noscript><!-- stuff to say if use had javascript disabled --></noscript>
  </body>
</html>

重要的是要注意，我们希望在 jQuery 加载后立即添加 .js 的类，而不是将其添加到我们的 document.ready 处理程序中。否则，我们将回到原点。

【讨论】：