<noscript>的相反是什么?

15

是否有一种 HTML 标签可以实现 <noscript> 的反向功能?即仅在 JavaScript 启用时显示某些内容?例如:

<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>    
<ifscript>
当然,<ifscript>实际上并不存在。我知道我可以使用JavaScript将<h1>添加到DOM中以达到相同的效果,但如果可能的话,我更愿意使用(X)HTML来实现这一点。 谢谢, Donal
5个回答

阿里云服务器只需要99元/年,新老用户同享,点击查看详情
35

这就是 <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>
为了改善用户体验,考虑将 <script> 调用放在需要切换的特定 HTML 元素之后,这样就不会出现“内容闪烁”或“元素混乱”的情况。Andrew Moore 在这个主题中给出了一个很好的例子。 另外,您也可以通过在<noscript>中使用<style>的方式(这是语法无效的,但自 IE6 及更高版本的所有浏览器,包括 W3C-strict Opera 都允许)来实现(hacky)。
<!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>

1
onload处理程序中显示元素可能会导致页面重新布局,移动元素。该元素也不会出现,直到页面上的所有图像都加载完成,如果您从慢服务器获取大型图像,则不是一个好事情 :-) jQuery的ready回调不会有这个问题,因为它在文档解析后立即起作用。 - Andy E
是的,jQuery或CSS-in-noscript的方式更受欢迎。 - BalusC
使用jQuery的方法并不能真正表示浏览器中禁用了JavaScript,它可能意味着jQuery未加载(可能被阻止)或CDN不可用,而与此同时,您的YouTube视频和Facebook小部件仍然可以正常工作。 - Wesley Murch

19

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

使用这种技术有以下优势:

  • 可以直接在CSS文件中针对启用JavaScript和未启用JavaScript的浏览器进行目标定位。

  • 它是有效的XHTML(<style>标记在<noscript>中是无效的,在<head>中使用<noscript>也是无效的)。

  • 样式更改是页面渲染之前首先发生的事情。它在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>

2
对于这个有趣的解决方案给予+1的支持。 - OregonGhost
3
这是一个不错的“现实世界”解决方案。 - BalusC
等一下,js-on和js-off类都被设置为display:none...?而且,如果你操作BODY标记使其不可见-你也看不到你的noscript消息。 - rlb.usa
2
@rlb.usb:请仔细阅读CSS规则。body.js-on #jsWarning并不意味着我正在修改body。它意味着我正在修改一个带有id="jsWarning"的标签,该标签位于<body class="js-on">内部。 - Andrew Moore
1
+1 太棒了 @Andrew Moore - 我一直在寻找,这绝对是我见过的最优雅和简单的方法。 - Dan Lugg

8

你能行吗

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

?如果你喜欢,可以将其转换为使用DOM树。


4
这正是原帖作者想要避免的。还有,document.write()?在2010年? - thepeer

3

这将起作用:

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

1
如果您想要为“完整”的HTML页面执行此操作,那么这种方法会很丑陋且容易出错。 - BalusC
2
@BalusC:你为什么要为“完整”的HTML页面这样做呢?你不会在文档完成后添加<noscript>标签(那将是自相矛盾的;-))。使用document.write()<script>可能是最接近<noscript>标签的确切相反面,这也是所要求的。 - Andy E
@Andy E:通常,noscript 与完全隐藏 HTML 页面的剩余部分结合使用,因为在没有 JS 的情况下无法使用特定页面。 - BalusC
@BalusC:而且通常情况下并不是这样,我不确定我是否理解了你的观点。我会说,更多时候它只是用来提醒用户网站缺乏高级功能。关闭JavaScript并重新加载SO以获取示例。 - Andy E
1
@Andy E:那么就没有理由要求noscript的相反功能了。让我们保持在这个话题的语境中;) - BalusC

1

关于这些问题的讨论在Alex Papadimoulis's Blog上非常有趣。其中包括一个asp.net ScriptOnly控件,它像您所问的ifscript控件一样起作用。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,