我们不应该使用<noscript>元素吗？

Question

我们不应该使用<noscript>元素吗？

javascriptxhtmlweb-standardsnoscript

72

我发现这里有一些缺点：

noscript元素仅检测浏览器是否启用了JavaScript。如果在防火墙中禁用了JavaScript，而不是在浏览器中，则JavaScript将无法运行，并且noscript元素的内容将无法显示。
许多脚本依赖于语言的特定功能才能运行（例如document.getElementById）。如果不支持所需的功能，则JavaScript无法运行，但由于JavaScript本身受支持，因此不会显示noscript内容。
最有用的使用noscript元素的地方是在页面的head部分，因为它可以在页面加载时选择性地确定应用于页面的样式表和meta元素，而无需等到页面加载完成。不幸的是，noscript元素只在页面body内有效，因此无法在head中使用。
noscript元素是块级元素，因此只能用于在JavaScript禁用时显示整个内容块。它不能用于内联。
理想情况下，网页应使用HTML用于内容，CSS用于外观，JavaScript用于行为。使用noscript元素是从HTML中应用行为，而不是从JavaScript中应用行为。

来源：http://javascript.about.com/od/reference/a/noscriptnomore.htm

我非常同意最后一点。是否有办法制作和添加外部的

- Jitendra Vyas

6

还有防火墙会禁用 JavaScript 吗？大约 13 年前我曾遇到过这种情况，当时就已经很糟糕了。我猜现在这种策略已经不可能存在了，因为大约三分之一的网站将无法使用。 - Sean Patrick Floyd

14

2

noscript标签可以很好地用于页面的头部部分。 - Diablo Geto

另外，给你一个建议：通常当我听到人们抱怨Web开发是“地狱般的”，那是因为他们没有正确理解Web标准或者Web工作原理的基本概念。如果你花时间学习这两个方面，你会发现Web开发非常一致和逻辑清晰。 - Marnen Laibow-Koser

@David 在 HTML 中定位图形元素通常是具有明确定义和简单的。如果你发现这需要猜测，也许你需要以不同的方式构建布局（提示：使用盒子模型将对象相对于彼此定位，而不是进行大量的独立定位）。CSS确实有一些缺失的功能，最好使用Sass等预处理器。虽然没有万灵药，但比你采用的方法更可靠的方法会多得多。 - Marnen Laibow-Koser

显示剩余6条评论

9个回答

26

经过多日思考并反复修改代码，我现在有了更清晰的认识，并且想在忘记之前分享一下我的两点看法。

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

对比

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

根据情况，有三种情况需要考虑：

情况1 - 如果所需脚本是内联的

JavaScript被禁用

<noscript>元素中的内容会立即显示，非JS内容会显示
<div>元素中的内容会立即显示，非JS内容会显示

JavaScript已启用

<noscript>元素中的内容不会出现，JS内容会显示
<div>元素中的内容可能会在隐藏前短暂地出现，JS内容会显示

对于这种情况，使用<noscript>元素是有优势的。

情况2 - 如果所需脚本来自外部（第三方）源，但通过内联脚本来隐藏`<div>`元素

JavaScript被禁用

<noscript>元素中的内容会立即显示，非JS内容会显示
<div>元素中的内容会立即显示，非JS内容会显示

JavaScript已启用，但所需脚本被阻止

<noscript>元素中的内容不会出现，什么也不会显示！
<div>元素中的内容可能会在隐藏前短暂地出现，什么也不会显示！

JavaScript已启用且已接收所需脚本

<noscript>元素中的内容不会出现，JS内容会显示
<div>元素中的内容可能会在隐藏前短暂地出现，JS内容会显示

对于这种情况，使用<noscript>元素是有优势的。

情况3 - 如果所需脚本隐藏了`<div>`元素

JavaScript被禁用

<noscript>元素中的内容会立即显示，非JS内容会显示
<div>元素中的内容会立即显示，非JS内容会显示

JavaScript已启用，但所需脚本被阻止

<noscript>元素中的内容不会出现，什么也不会显示！
<div>元素中的内容会显示，非JS内容会显示

JavaScript已启用且已接收所需脚本

<noscript>元素中的内容不会出现，JS内容会显示
<div>元素中的内容可能会在隐藏前短暂地出现，JS内容会显示

对于这种情况，使用<div>元素是有优势的。但要确保所需脚本包含：

document.getElementById('noscript').style.display='none';

- Question Overflow

2

内联脚本元素似乎不受安全人员和CSP的喜爱。显然它们可以用于某种注入攻击。他们希望所有脚本都在单独的文件中，不确定为什么。 - David Spector

8

虽然Tor Valamo对这个问题有一个优雅的解决方案，但是有一个问题可能会导致您选择不使用此技术。

问题通常出现在IE浏览器上。它加载和执行JS的速度比其他浏览器稍慢，导致它有时会在加载JS并隐藏div之前闪现“请启用您的Javascript”div。

这很烦人，为了解决这个问题，您可以实现“经典”的

- Steve Hemsley

只要您重定向到仍以其他方式提供相同功能和信息的页面，否则这确实非常非常恼人。 - user4815162342

请参考 https://dev59.com/7XA75IYBdhLWcg3wkZ-A#9823468 了解如何避免页面闪烁问题。该方法使用 head 标签中的 JavaScript 隐藏 HTML 标签，因为该标签在 body 读取之前就存在。然后在文档准备好后再显示出来。 - ToolmakerSteve

我使用了一个阻止JS的Chrome扩展程序进行测试，但它没有起作用（没有重定向），只有在浏览器设置中禁用JS才有效。这不是最好的解决方案。 - Raja Khoury

7

一个非常有用的noscript应用是用于逐步增强异步加载重型内容（尤其是"下折页"）。在HTML源代码中，可以使用noscript将大型图片、iframe等内容包裹起来，然后在DOM准备好之后使用JavaScript添加未包裹的元素到页面上。这样就解除了页面阻塞，可以使初始加载体验更加迅速，特别是如果您的界面依赖于文档准备好之后应用JS/JQ交互（相对于一个我咨询过的作品集页面而言，2秒对6秒）。

- Geordie Kaytes

5

这些天似乎几乎每个浏览器都运行Javascript，但你永远不知道谁会访问你的网站。现在甚至屏幕阅读器和网络爬虫也使用Javascript，有时候如果必须要，它们会发起AJAX请求。

话虽如此，如果你要回退到无Javascript状态，有一种比<noscript>标签更好的方法。只需在文档的HEAD中这样做：

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

使用这种技术，您可以轻松地在CSS中引用Q_js类以隐藏内容。使用<noscript>标签，您最好的希望是包含一个额外的CSS文件来覆盖之前的CSS。当某些具有静态内容的元素需要立即隐藏（而不是闪烁），直到Javascript使它们更具动态性时，这变得非常重要。

简而言之，我建议的技术解决了您所有的缺点1-5，并且我认为它比使用<noscript>更好。

- Gregory Magarshak

目前网络爬虫对JS的使用仍然受到限制。使用JS隐藏内容会产生闪烁效果。 - Gherman

只有在您的JavaScript加载元素之后，它才会产生闪烁。这不是隐藏元素，而是在<head>中添加了Javascript，将类添加到它们的容器中，该容器在所有这些元素之前加载！ - Gregory Magarshak

5

在（希望不久的）未来，您将能够使用 css @media scripting：

@media (scripting: none) {
    /* styles for when JS is disabled */
}

- Null

1

简单地说，在这个时代，您的网站可能需要适应在缓慢设备上无 JavaScript 使用，使用 noscript 标签作为整个网站内容的实体**（您的 HTML 应该准备好无 JavaScript，并且所有控件必须也在 JavaScript 关闭时工作，使用基本的 HTML 控件的用户应该能够像之前启用 JavaScript 时一样完成所有操作。因此，<noscript></noscript> 可以是动态切换到其他方式的相同内容，具有相同结果 = 解决了用户打开您的 URL 的原因）。**可以看出，无论 JavaScript 是否存在，网站的功能都可以在任何情况下 js 启用/禁用时“相同”。在中国的慢速设备上，例如 Samsung Neo Mini 手机，此方法可以在低互联网流量下运行网站而无需任何延迟。如果在 js 开/关情况下尝试运行此自动双重功能网站：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

进一步说，正确的noscript是为了在禁用js时起到触发器的作用，但您可以绕过此功能来改变互联网功能的走向，改变它的动态......

- user5781320

1

我在所有页面创建一个具有某个id的占据全屏幕、固定位置的div。

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

我不是专家。这对我有效。抱歉，但只有在您希望用户始终启用JavaScript时，此情况才适用。

- R.Raaj Prashanth

如果 jQuery 出现故障，$('#noscript_div').hide(); 将不会触发。 - mowgli

1

像所有事情一样，使用正确的工具完成工作。

如果您正在使用Google Maps API，则可以通过标签获得静态图像，并将其替换为动态JS地图。最近，Google开始对所有内容收费，因此在上述示例中，您需要支付两次费用，一次为静态费用，一次为动态费用。如果禁用JS，则静态地图才是相关的。因此，为了节省双重付款，最好的解决方案似乎是将静态地图的标签包装在标签中。

- Peter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tor Valamo · Accepted Answer

49

最好将默认设置为非 JavaScript，然后让 JavaScript 代码在启用 JavaScript 的页面上进行覆盖。并不需要太多，可以只是一个 display:none; 块，然后由 JavaScript 设置为 display:block;，非 JS 页面反之。

- Tor Valamo

35

一个设置为display:none的display:block，并显示“你的浏览器似乎不支持JavaScript”的信息，是NOSCRIPT的一个可行替代方案，但这样会丢失语义信息（机器人无法理解你在说什么）。 - Konerak

2

为确保此方法在启用JavaScript时不会导致非JavaScript版本的闪烁，请参见https://dev59.com/7XA75IYBdhLWcg3wkZ-A#9823468以了解如何避免闪烁。（在head标签中使用JavaScript隐藏HTML标签，因为该标签存在于body被读取之前。然后在文档准备就绪时再次显示。） - ToolmakerSteve

9

为什么它比<noscript>标签更好？ - random_user_name

2

如果你在文档准备就绪后通过JS将某些内容设置为"display: none"，那么页面打开时会出现闪烁。回退元素会在一瞬间可见。这很痛苦。原生的noscript标签不会闪烁。我不知道如何消除这种闪烁。 - Gherman

4

由于脚本的存在，将HTML内容直接显示出来是有危险的。无论是否需要脚本依赖，原始内容和HTML应该默认显示。noscript最初的设计意图是仅在浏览器禁用脚本时出现。通过颠倒这一概念，现在将内容和noscript触发到显式脚本中，会移除这些元素在没有脚本的情况下的本机显示。 - Stokely

显示剩余6条评论

我们不应该使用<noscript>元素吗？

情况1 - 如果所需脚本是内联的

情况2 - 如果所需脚本来自外部（第三方）源，但通过内联脚本来隐藏<div>元素

情况3 - 如果所需脚本隐藏了<div>元素

情况2 - 如果所需脚本来自外部（第三方）源，但通过内联脚本来隐藏`<div>`元素

情况3 - 如果所需脚本隐藏了`<div>`元素