Question

让我们说，我有这样的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时，它才会显示“这是内容文本”。

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

Answer 1

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

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

Answer 2

使用display none将所有内容包装在主div中，并在onload函数中将显示更改为block。

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

Answer 3

有点奇怪。

你甚至不需要'noscript'。你可以只有一个空白的第一页，他的唯一内容是形式的javascript：

document.location = '/realpage.htm';

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

编辑：

示例，根据要求：

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

Answer 4

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

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

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

Answer 6

我遇到了一个很大的问题：

我想在启用javascript时显示完整网站。但是，如果javascript被禁用，我不仅要显示“此网站需要javascript ...”消息，而且我仍然希望显示标题＆amp;我的网站的页脚（位于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; 
}

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

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

Answer 7

样式标记和元刷新DO都在noscript内部工作：

<noscript>

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

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

</noscript>

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

Answer 8

您可以执行类似

的操作

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

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

8 个答案: