noscript 标签在不同浏览器中的处理方式答案

【问题标题】：how noscript tag treated in different browsersnoscript 标签在不同浏览器中的处理方式
【发布时间】：2016-08-29 06:29:43
【问题描述】：

我在任何地方都看不到任何解释。

我只是想知道浏览器使用noscript 标签内的数据生成了什么，如果 JS 已启用。

例如：

根据 HTML5 规范，允许在 head 标签内使用 noscript 标签。

<head>
<noscript>
<link rel="stylesheet" href="basic.css" type="text/css" media="all" />
</noscript>
</head>

我问这个问题的原因是我担心某些浏览器可能会将noscript标签视为文本（如果启用了JS），因此它会加载/添加不必要的数据。

那么，浏览器实际上是如何处理noscript 标签的呢？

谢谢。

【问题讨论】：

@JaromandaX 你能提供一个回答我问题的报价吗？
@JaromandaX 但它没有回答 what 浏览器使用 noscript 标签内的数据生成
哦，你想知道启用 JS 时 <noscript> 的内容会发生什么 - 抱歉，我完全误读了你的问题 - 让我删除我的垃圾
The noscript element represents nothing if scripting is enabled, and represents its children if scripting is disabled. - w3.org/TR/html5/scripting-1.html#the-noscript-element - 这并没有说明个别浏览器实际执行的操作，但是我之前链接的 MDN 页面没有提及任何与此标准的偏差
如果互联网搜索没有产生您正在寻找的明确答案，我唯一可以建议的另一件事是测试您可以访问的尽可能多的浏览器（您可以使用在线虚拟浏览器也可以测试）

标签： javascript html css cross-browser noscript

【解决方案1】：

HTML 元素定义要插入的一段 html 如果页面上的脚本类型不受支持或者脚本是目前在浏览器中关闭。 Source.

还有

如果启用了脚本，则 noscript 元素不代表任何内容，并且如果禁用脚本，则表示其子级。它用于向支持脚本的用户代理提供不同的标记和那些不支持脚本，通过影响文档的方式解析。 Source.

noscript 标签在浏览器中得到很好的支持，据我所知没有偏离标准规范。

顺便说一句，如果您确实需要确保其在不同浏览器中的行为，您可以使用基于 Web 的浏览器测试工具 https://www.browserstack.com，这将加快您的测试过程。

【讨论】：

问题是 what 如果启用了 JS，noscript 标签的内容（生成的内容）会变成什么。
@virosimus 感谢您的评论。我已经用 w3 来源的链接更新了我的答案。
嗯...由于某种原因，我不能将 @Gibbok 与您的昵称一起使用 :) 无论如何，我感谢您的帮助，但这对 Jaromanda X 的回答没有任何帮助。

【解决方案2】：

要理解这一点，请记住 HTML5 规范描述了两种语法，一种是（常规）HTML，一种是当页面被提供为 text/html 时，另一种是 XHTML，当页面被提供为 application/xhtml+xml 时。浏览器会根据使用的语法做不同的事情。

我希望您感兴趣的是text/html 语法，因此，规范描述了section 8 - The HTML syntax 中发生的情况。

然后我们需要遵循解析器算法的树构造阶段，对于您的示例，<noscript> 元素位于头部部分，请查看 The "in head" insertion mode。从那里向下搜索你会发现A start tag whose tag name is "noscript, if the scripting flag is enabled 链接到generic raw text element parsing algorithm.。

这会将标记器置于RAWTEXT state 中，这意味着所有字符都只是传递，直到找到</noscript> 标记（即未解析实体引用）并且插入模式切换为The "text" insertion mode。

这只是将每个字符添加到文本节点，直到当插入模式切换回以前的模式时找到 </noscript> 标签，例如“in head”插入模式和<noscript>元素的解析就完成了。

您的示例的结果是 <link rel="stylesheet" href="basic.css" type="text/css" media="all" /> 将是文本节点的未解释内容，作为 <noscript> 元素的唯一子节点。

【讨论】：