Question

是否有与<noscript>相反的HTML标记？也就是说，仅在启用JavaScript时显示一些内容？例如：

<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>    
<ifscript>

当然<ifscript>实际上并不存在。我知道通过使用JavaScript将<h1>添加到DOM可以实现相同的结果，但是如果可能的话，我更愿意使用（X）HTML。

谢谢，敦尔

Answer 1

那里有<script>。最初只是使用CSS隐藏特定部分并使用JavaScript来显示它。这是一个基本的启动示例：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643</title>
        <script>
            window.onload = function() {
                document.getElementById("foo").style.display = 'block';
            };
        </script>
        <style>
            #foo { display: none; }
        </style>
    </head>
    <body>
        <noscript><p>JavaScript is disabled</noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

...或者，在jQuery ready()的帮助下，显示内容的时间越早越好：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#foo').show();
            });
        </script>
        <style>
            #foo { display: none; }
        </style>
    </head>
    <body>
        <noscript><p>JavaScript is disabled</noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

为了改善用户体验，请考虑在需要切换的特定HTML元素之后直接放置<script>调用，这样就不会出现“内容闪现”或“元素随机播放”。 Andrew Moore在这个主题中给出了good example。

或者，您可以使用<style> <noscript>中的<!doctype html> <html lang="en"> <head> <title>SO question 2297643 with CSS in noscript</title> </head> <body> <noscript> <style>#foo { display: none; }</style> <p>JavaScript is disabled </noscript> <div id="foo"><p>JavaScript is enabled</div> </body> </html>反之亦然（hacky）。这在语法上是无效的，但IE6及更高版本的所有浏览器都允许这样做，包括W3C严格的Opera：

{{1}}

Answer 2

我通常在HTML页面中执行以下操作：

<html>
  <head>
    <!-- head tags here -->
  </head>
  <body class="js-off">
    <script type="text/javascript">
      // Polyglot! This is valid MooTools and jQuery!
      $(document.body).addClass('js-on').removeClass('js-off');
    </script>

    <!-- Document markup here -->
  </body>
</html>

使用这种技术有以下优点：

您可以定位启用了JavaScript的浏览器和不直接放在CSS文件中的浏览器。
这是有效的XHTML（<style>中的<noscript>代码无效，<noscript>中的<head>代码无效。
即使在呈现页面的其余部分之前，样式也会发生变化。它在domReady之前触发，因此没有样式闪烁。

这样，当你有不同风格的小部件时，如果启用了JS，你可以在CSS文件的同一个地方定义你的风格。

<style type="text/css">
  #jsWarning {
    color: red;
  }

  #jsConfirm {
    color: green;
  }

  body.js-on #jsWarning,
  body.js-off #jsConfirm {
    display: none;
  }
</style>

<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>

Answer 3

怎么样

<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>

？如果您愿意，可以转换为使用DOM树。

Answer 4

这将有效：

<script type="text/javascript">
 if (document != undefined)
 {
    document.write("Woohoo, JavaScript is enabled!");
 }
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>

Answer 5

Alex Papadimoulis's Blog对这些问题进行了有趣的讨论。它包含一个asp.net ScriptOnly控件，其作用类似于您询问的ifscript控件。

与<noscript> </noscript>相反

5 个答案: