Javascript 与<；noscript>；_Javascript_Html

Javascript 与<；noscript>；

javascript html

Javascript 与<；noscript>；,javascript,html,Javascript,Html,是否有与相反的HTML标记？也就是说，仅当启用JavaScript时才显示某些内容？例如： <ifscript> <h1> Click on the big fancy Javascript widget below</h1> <ifscript> 单击下面的大型Javascript小部件当然，实际上并不存在。我知道我可以通过使用JavaScript将添加到DOM中来实现相同的结果，但是如果可能的话，我更愿意使用（X）HTML来实现

是否有与

相反的HTML标记？也就是说，仅当启用JavaScript时才显示某些内容？例如：

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


单击下面的大型Javascript小部件

当然，

实际上并不存在。我知道我可以通过使用JavaScript将

添加到DOM中来实现相同的结果，但是如果可能的话，我更愿意使用（X）HTML来实现这一点

谢谢，多纳尔怎么样

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


write（“单击下面的大型Javascript小部件”）；

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

这里的

是为您准备的。只需最初使用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>

为了提高用户体验，考虑在需要切换的特定HTML元素之后直接放置<代码> <代码>调用，这样就没有“内容闪现”或“元素洗牌”。Andrew Moore在这个主题中给出了一个答案

或者，您也可以使用

中的

以另一种方式进行操作（hacky）。这在语法上是无效的，但IE6及以上的所有浏览器都允许这样做，包括W3C严格的Opera：

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


所以在noscript中使用CSS的问题2297643
#foo{display:none；}
JavaScript已禁用
JavaScript已启用

这将起作用：

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


如果（文档！=未定义）
{
write（“Woohoo，JavaScript已启用！”）；
}
对不起，伙计，我们这里使用JavaScript。

在上有一个关于这些问题的有趣讨论。它包括一个asp.net

ScriptOnly

控件，其作用类似于您所问的

ifscript

控件。

我通常在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>

然而，如果你想为一个“完整”的HTML页面这样做的话，它是丑陋和容易出错的。@BalusC：你为什么要为一个“完整”的HTML页面这样做？文档完成后不添加

标记（这将是自相矛盾的；-）

与

文档一起使用。write（）

可能与

标记最接近，这是所要求的。@Andy E:通常，noscript与HTML页面剩余部分的完全隐藏结合使用，因为没有JS不可能使用特定页面。@BalusC:通常不是，我不确定我是否明白你的意思。我经常会说，它只是用来提醒用户站点中缺乏高级功能。例如，关闭javascript并重新加载。@Andy E:那么就没有理由要求与noscript相反的内容了。让我们继续讨论这个话题；）在

onload

处理程序中显示元素可能会导致页面回流，从而移动元素。在页面上的所有图像完成加载之前，元素也不会出现，如果您从速度较慢的服务器获取一个大图像，这不是一件好事：-）jQuery的

ready

回调不会出现此问题，因为它在解析文档后立即工作。是的，更倾向于使用jQuery方式或noscript中的CSS。使用jQuery方式并不能真正表明浏览器中禁用了javascript，这可能意味着jQuery未加载（可能被阻止）或CDN已关闭/不可用，同时，你的YouTube视频和Facebook小部件继续正常工作。+1用于这个有趣的解决方案。+1这是一个很好的“真实世界”解决方案。等等，js on和js off类都设置为显示：无？此外，如果您正在操纵BODY标记使其不可见，您也不会看到noscript消息。@rlb.usb：请仔细阅读CSS规则

body.js-on#jsWarning

并不意味着我在修改body。这意味着我正在用

id=“jsWarning”

修改一个标签，它位于

+1伟大的解决方案@Andrew Moore-我一直在寻找，这是迄今为止我见过的最优雅、最简单的方式。这正是OP想要避免的。还有，document.write（）？2010年？

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

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