在 HTML 网页中，noscript 标签内的内容不会被带有脚本阻止扩展的浏览器呈现

Question

在 HTML 网页中，noscript 标签内的内容不会被带有脚本阻止扩展的浏览器呈现。

我有一个页面

http://www.zen76171.zen.co.uk/aaa2.html

用这个HTML

<!doctype html>
<html>
<head>
<noscript>aaa</noscript>
<script>document.write("bbb")</script>
</head>
<body>
ccc
</body>
</html>

我理解 noscript 标签的内容应该运行如果浏览器不是运行ning javascript.

在 chrome 或 firefox 中，没有扩展阻止任何东西，我得到 bbb ccc 的输出。很好，很有道理。 'bbb'显示是因为允许javascript，显示ccc是因为它会显示是否启用javascript。

如果我安装例如uBlock 原始扩展，或者如果在 Firefox 中我安装了 NoScript 扩展（注意-该扩展的名称恰好与 noscript 标签相同），然后当我重新加载页面时我提到

http://www.zen76171.zen.co.uk/aaa2.html

显示ccc。这向我表明脚本被阻止了（因为它没有显示 bbb，所以那部分（没有显示 bbb，很好。

但我期望的输出是 aaa ccc，因为我期望 'aaa' 在禁用脚本和禁用脚本时显示。

还有一个我要解决的次要问题，那就是如果我禁用甚至 'remove' 来自 Firefox 的 NoScript 扩展，那么我仍然会得到与 'ccc' 相同的响应，我必须卸载并重新安装 Firefox 才能删除 NoScript 扩展。但就目前而言，当我想删除 NoScript 扩展时就可以了。 uBlock Origin 没有这样的问题（不需要重新安装浏览器来删除它！）。因此，如果有人试图重现此问题，那么我建议他们要么使用他们拥有的脚本拦截器，要么像我一样使用 uBlock Origin。

为什么它只显示 'ccc' 而不是 'aaa ccc'（当脚本被阻止时）？

uBlock Origin 或 NoScript 扩展就是这种情况。所以，它似乎与任何禁用脚本的东西有关。

那么，为什么 aaa 从来没有显示过。我认为它应该在禁用脚本时显示。

Answer 1

只有当 <noscript> 在 body 中时，它才有效，而不是 head。它的行为是绝对正确的。想想在 <head> 中设置任何内容：它不会显示。

不工作：<noscript> 在 <head>

<!doctype html>
<html>
<head>
    <noscript>aaa</noscript>
    <script>document.write("bbb")</script>
</head>
<body>
    ccc
</body>
</html>

使用最新的 Chrome 和 uBlock Origin extension on Windows 10 Pro on this codepen

进行了测试

将工作：<noscript> 在 <body>

<!doctype html>
<html>
<head>
</head>
<body>
    <noscript>aaa</noscript>
    <script>document.write("bbb")</script>
    ccc
</body>
</html>

使用最新的 Chrome 和 uBlock Origin extension on Windows 10 Pro on this codepen

进行了测试

额外

在 MDN <noscript> page 上说（强调我的）

Permitted content: When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements. When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants. Otherwise: flow content or phrasing content.

因此：如果在头部，则只允许 link、元数据和样式

Answer 2

脚本阻止扩展通常通过阻止脚本元素来工作。他们不会在浏览器中禁用 JavaScript 支持。

由于浏览器本身启用了 JS 支持，因此它不会呈现 noscript 个元素。

改用progressive enhancement。先从JS不行的浏览器内容开始，再用JS改。

Array.from(
    document.querySelectorAll(".nojs")
).forEach(
    node => node.remove()
);

<span class="nojs">aaa</span> ccc

在 HTML 网页中，noscript 标签内的内容不会被带有脚本阻止扩展的浏览器呈现

In HTML webpage, the content within noscript tags are not getting rendered by browsers with script blocking extension

html

javascript

noscript

额外