javascript禁用时如何包装<noscript>标签以隐藏内容答案

【问题标题】：How to wrap <noscript> tag to hide content when javascript disablejavascript禁用时如何包装<noscript>标签以隐藏内容
【发布时间】：2009-09-16 05:38:51
【问题描述】：

假设我有这样的 HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
This is content.
</body>
</html>

我想在那里添加一个<noscript> 标签。这意味着，如果禁用 JavaScript，它将显示为空白页。

只有当 JavaScript 被禁用时，它才会显示“这是内容文本”。

请给我一些例子来实现。谢谢。

【问题讨论】：

标签： noscript

【解决方案1】：

rahul 建议的 JS 方法的替代方法是在 <noscript> 元素中显示一个 div，覆盖整个页面：

<noscript>
    <div style="position: fixed; top: 0px; left: 0px; z-index: 30000000; 
                height: 100%; width: 100%; background-color: #FFFFFF">
        <p style="margin-left: 10px">JavaScript is not enabled.</p>
    </div>
</noscript>

【讨论】：

太棒了！我会支持它，但我没有启用 javascript.. :-)

【解决方案2】：

将所有内容包装在一个主 div 中，不显示任何内容，并在 onload 函数中将显示更改为块。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
  <div id="divMain" style="display: none">
    This is content.
  </div>
<noscript>
  JS not enabled
</noscript>
<script>
  document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>

【讨论】：

感谢它的工作。只想知道另外一个问题，即使我们加了noscript标签，他们还能查看源码吗？
是的，当然，noscript 与 HTML 生成无关。
啊好吧。感谢您的快速响应。

【解决方案3】：

noscript 标签正好相反。要在启用脚本时使内容可见，请将其放在隐藏的元素中，并使用脚本显示：

<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>

【讨论】：

【解决方案4】：

这有点奇怪。

您甚至不需要为此提供“noscript”。您可以只拥有一个空白的第一页，其唯一的内容是表单的 javascript：

document.location = '/realpage.htm';

然后调用OnLoad、jQuery 或其他。这意味着如果客户端没有脚本，他们不会去任何地方，因此页面保持空白。

编辑：

示例，根据要求：

<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>

【讨论】：

嗨丝滑，我也想试试你的方法。但由于缺乏知识。我不知道该怎么做。你能写示例代码让我测试吗？谢谢。
感谢您的回复。明白了。
除非您的网站只允许用户通过一个网关页面访问它，否则您需要为每个要显示的页面提供两个页面。是的？或者只有一页的网站。
我真的很喜欢这种方法允许分离视图的关注点。以前的方法有效，但以后会更难维护，+1，干得好！

【解决方案5】：

这应该真的有效！未启用 javascript 时隐藏内容 注意：您也可以将<noscript> 替换为<noembed> 或<noframes>。

<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
<noscript>
<div style="position: absolute; right: 0; bottom: 0;
     display: none; visibility: hidden">
</noscript>
<-- Content that should hide begin -->
**Don't Show! Content**
<-- Content that should hide begin -->
<noscript>
</div>
</noscript>
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->

【讨论】：

【解决方案6】：

样式标签和元刷新都可以在 noscript 中工作：

<noscript>

<style>body { display:none; }</style>

<meta http-equiv="refresh" content="0; url=blankpage.html">

</noscript>

第一行将显示当前页面但为空。第二行将重定向到 blankpage.html

【讨论】：

最佳解决方案！！！

【解决方案7】：

我遇到了一个非常大的问题：

我想在启用 javascript 时显示完整的网站。但是，如果禁用了 javascript，我不仅想显示“此站点需要 javascript...”消息，而且还想显示页眉和页脚（位于 header.inc 和 footer.inc 中，由我网站的每个内容页面）（看起来不错）。换句话说，我只想替换我网站的主要内容区域。这是我的 html/css 解决方案：

Header.inc 文件（位置不重要）：

<noscript>
    <style>
        .hideNoJavascript {
            display: none;
        }  
        #noJavascriptWarning {
            display: block !important;
        }
    </style>
</noscript>

头文件（底部）：

<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->

CSS 文件：

#noJavascriptWarning {
    color: #ed1c24;
    font-size: 3em; 
    display: none;  /* this attribute will be overridden as necessary in header.inc */
    text-align: center;
    max-width: 70%;
    margin: 100px auto; 
}

总之，根据我的默认 CSS 规则，我的“需要 javascript”消息是隐藏的。但是，当浏览器解析标签时，它会覆盖默认规则，导致主要内容被隐藏，（除了页眉/页脚之外的所有内容）并显示 javascript 消息。完美地工作......满足我的需要！希望其他人觉得这很有用:-)

以下是两个启用/禁用 javascript 的屏幕截图：

【讨论】：

【解决方案8】：

你可以这样做

<body id="thebody">
  this is content.
  <script>
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
  </script>
</body>

【讨论】：