24

Let's say, I have HTML code like this:

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

And I want to add a <noscript> tag there. Which means, if the JavaScript disabled, it will show as a blank page.

And only when JavaScript is disabled, it will show "This is content text".

Please give me some examples to achieve. Thanks.

4

8 回答 8

60

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>
于 2011-05-02T17:58:21.070 回答
25

将所有内容包装在一个主 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>
于 2009-09-16T05:48:17.353 回答
6

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

<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>
于 2009-09-16T05:48:06.340 回答
5

这有点奇怪。

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

document.location = '/realpage.htm';

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

编辑：

示例，根据要求：

<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>
于 2009-09-16T05:46:31.243 回答
4

这应该真的有效！未启用 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: -->
于 2011-09-17T21:06:43.190 回答
4

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

<noscript>

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

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

</noscript>

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

于 2018-03-06T09:44:19.680 回答
2

你可以做类似的事情

<body id="thebody">
  this is content.
  <script>
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
  </script>
</body>
于 2009-09-16T05:48:45.903 回答
2

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

我想在启用 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 的屏幕截图：

在此处输入图像描述

在此处输入图像描述

于 2016-12-20T00:22:06.827 回答