<noscript> 标签不工作答案

【问题标题】：<noscript> tag not working<noscript> 标签不工作
【发布时间】：2013-06-18 18:34:12
【问题描述】：

我使用<noscript> 标签在未启用 javascript 时隐藏某些元素；但是，它似乎不起作用。

我的文件声明：

<!DOCTYPE html>

在我的文件末尾，我输入了以下内容：

<noscript>
 <style type="text/css" scoped> #status {display:none;} </style> 
</noscript>

</body>
</html>

但即使禁用 JS，#status div 仍然存在。我在这里遗漏了什么吗？

【问题讨论】：

我不确定链接问题的接受答案是否正确。见developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
@JamesMontagne 的最终目标是相同的，但问题不是。
很公平，我收回了。

标签： javascript html css

【解决方案1】：

删除style 标记的scoped 属性。它使您的 CSS 严格适用于 <noscript> 标记。

如果此属性存在，则样式仅适用于其父元素。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#Attributes

【讨论】：

谢谢！它有效:) 不知道为什么我没有尝试。很快就会在 S.O. 时标记这一点。允许我（时间限制）
啊，其实我以前从来没有用过，但是当我用 w3 days ago 验证我的代码时，它显示了一个错误（缺少作用域 att。）这是我第一次使用这个 att。，直到我今天尝试禁用 JS，我才忘记了这一切。菜鸟，我知道:)
100% w3c validation is at best not worth it, 最坏的情况是有害的（正如你在这里看到的！）。不过，很高兴能提供帮助。
但它只适用于某些浏览器，因为它们使用<body> 中的样式表中定义的样式。但他们不应该因为这不是标准的（只有当他们有scoped 属性时）。相反，样式表只能用于<head>。

【解决方案2】：

一个更简单的管理解决方案是默认隐藏元素并使用它：

<script>document.getElementById('status').style.display='block';</script>

（或等效的基于类的解决方案）

【讨论】：

也许更简单，但是当您想要在 JS 被禁用时特别做某事时，<noscript> 标记很有意义。
我想到了一个类似的解决方案（添加自定义类），但启用 JS 后，在 JS 加载之前会有短暂的延迟。这对我来说很重要，所以我只想用 HTML 来处理它。还是谢谢。
@MattBall 我赞成您的回答，这具有解释问题的额外优势。我做了我的作为替代品。艾哈迈德，如果你把这个脚本放在正文的末尾没有延迟，浏览器在执行脚本之前不会渲染页面。
是的，你是对的，我总是使用单独的 JS 文件。此外，我正在使用禁用 JS 来更改自定义光标等。我知道这里有多种解决方法，但 noscript 似乎很简单，对我来说代码更少。

【解决方案3】：

尝试删除style 的scope，如下面的代码。

       <noscript>
           <style type="text/css"> #status {display:none;} </style> 
       </noscript>

【讨论】：

【解决方案4】：

@dystroy 的回答是正确的做法，因为：

<style> 元素不能放在<body> 上（除非它们具有scoped 属性）
<noscript> 元素不能放在头上。

但如果你不想延迟，你可以在<head>中使用以下内容：

<style id="noScriptSheet" type="text/css">
.onlyScript{ display:none;}
</style>

<script type="text/javascript">
function kill(el){
    return el.parentNode.removeChild(el);
}
kill(document.getElementById('noScriptSheet'));
</script>

并为您的元素添加一个类：

<div class="onlyScript">Hello world!</div>

演示：http://jsfiddle.net/TQLfu/

【讨论】：

技术上 noscript 可以放在 head 中，但是这样做是有限的 w3schools.com/tags/tag_noscript.asp "当在元素中使用时：

【解决方案5】：

我添加这个答案是因为这似乎是关于noscript 标签的最流行的 SO 问题。

“Sybu JavaScript Blocker” 似乎根本不会触发它。因此，如果您使用该 JavaScript 拦截器进行测试请尝试使用另一个 JavaScript 拦截器。当我使用“Toggle Javascript”时，noscript 标签触发没有问题。我还没有找到一种方法来检测正在使用“Sybu JavaScript Blocker”。

我的测试环境：

Sybu JavaScript 拦截器，2.93 版
切换 JavaScript，版本 1.3
Chrome，版本 85.0.4183.83

【讨论】：