脚本标记中何时需要 CDATA 部分？答案

【问题标题】：When is a CDATA section necessary within a script tag?脚本标记中何时需要 CDATA 部分？
【发布时间】：2010-09-09 04:07:57
【问题描述】：

CDATA 标记在脚本标记中是否必要？如果需要，何时需要？

换句话说，这是何时何地：

<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>

更喜欢这个：

<script type="text/javascript">
...code...
</script>

【问题讨论】：

既然 XHTML 基本上已经死了，这不再是一个相关的问题吗？
@allyourcode：是什么让您认为 XHTML 已死？ HTML5？有 XHTML5 与它一起使用 :)
@DoktorJ AFAIK xHTML 是第 1 版。它的 HTML 等价物是第 4 版。xHTML 2.0 集中了精力，打算将 xform、xlink、time 和 svg 命名空间作为一种方式推送到规范中改进 HTML 5 所添加的相同功能 - xform/input-validation、时间/动画、svg/canvas - 但 xHTML 2 规范的努力重新集中在 HTML 5 功能上。这并不是说 xHTML 2 已被放弃或过时，但在不久的将来并没有计划。
XHTML 在 Java Seam / JSF / Facelets 开发中并未消亡。
@Mihai Stancu -- 这并不完全正确。根据 W3C 的说法，有一个 XML syntax for HTML5：“可用于 HTML5 的另一种语法是 XML。这种语法与 XHTML1 文档和实现兼容。使用这种语法的文档需要使用 XML 媒体类型提供服务，并且元素需要按照 XML 规范规定的规则放在 w3.org/1999/xhtml 命名空间中。”

标签： javascript html xhtml cdata

【解决方案1】：

如果您需要将文档解析为 XML（例如，当 XHTML 页面被解释为 XML）并且您希望能够编写文字 i<10 和 a &amp;&amp; b 而不是 @ 987654324@ 和 a &amp;&amp; b，因为默认情况下 XHTML 会将 JavaScript 代码解析为已解析的字符数据，而不是字符数据。对于存储在外部源文件中的脚本，这不是问题，但是对于 XHTML 中的任何内联 JavaScript，您可能想要使用 CDATA 部分。

请注意，许多 XHTML 页面从未打算被解析为 XML，在这种情况下这不会成为问题。

有关该主题的精彩文章，请参阅https://web.archive.org/web/20140304083226/http://javascript.about.com/library/blxhtml.htm

【讨论】：

它不仅仅是“验证”。如果遇到非法字符，大多数严格的 XML 解析器将不会通过页面。这不仅仅是为了让 W3C 开心，并获得绿色而不是红色。
如果避免使用 & 和 < 字符，则不需要 CDATA 部分；它在 HTML 和 XHTML 中都能正常工作。您可以通过将所有重要代码放在外部脚本中并仅使用内联脚本来轻松实现这一点。初始化变量（如果需要，在字符串文字中将 &/< 转义为 \x26/\x3C）。
HTML5的情况如何？
@Mathew Attle - 这是一个很好的问题。在单独的线程上提出一个很好的问题，以确保它得到所需的关注。
@Loren：那么它仍然完全是关于验证。用户代理拒绝无效 XML 的程度是正交的。

【解决方案2】：

当浏览器将标记视为 XML 时：

<script>
<![CDATA[
    ...code...
]]>
</script>

当浏览器将标记视为 HTML 时：

<script>
    ...code...
</script>

当浏览器将标记视为 HTML 并且您希望 XHTML 1.0 标记（例如）进行验证时。

<script>
//<![CDATA[
    ...code...
//]]>
</script>

【讨论】：

为了代码安全，最好用块 cmets /* ... */ 包围你的 CDATA，否则如果删除换行符，代码就会中断
第一部分中的“...as XML”不应该是“...as non-interpreted text”吗？在stackoverflow.com/questions/2784183/what-does-cdata-in-xml-mean 中，我们看到“...这些字符串包含可以被解释为XML 标记但不应该被解释的数据。”
@mattwilkie，我对“as XML”的意思是“当浏览器使用其 XML 解析器（而不是 HTML 解析器）来解析标记时，因为文档是使用基于 XML 的 mime 发送的类型或包含标记的文件具有基于 XML 的文件扩展名”。

【解决方案3】：

HTML

HTML 解析器会将<script> 和</script> 之间的所有内容视为脚本的一部分。 ~~有些实现甚至不需要正确的结束标签；他们在“</”处停止脚本解释，根据specs~~，这是正确的。

更新在 HTML5 和当前的浏览器中，情况不再如此。

所以，在 HTML 中，这是不可能：

<script>
var x = '</script>';
alert(x)
</script>

CDATA 部分完全没有影响。这就是为什么你需要写

var x = '<' + '/script>'; // or
var x = '<\/script>';

或类似的。

这也适用于作为text/html 服务的XHTML 文件。（因为 IE 不支持 XML 内容类型，所以大部分情况都是如此。）

XML

在 XML 中，适用不同的规则。请注意，（非 IE）浏览器仅在 XHMTL 文档以 XML 内容类型提供时才使用 XML 解析器。

对于 XML 解析器，script 标签并不比任何其他标签好。特别地，脚本节点可能包含非文本子节点，由“<”触发； “&”符号表示字符实体。

所以，在 XHTML 中，这是不可能：

<script>
if (a<b && c<d) {
    alert('Hooray');
}
</script>

要解决此问题，您可以将整个脚本包装在 CDATA 部分中。这告诉解析器：'在本节中，不要将“<”和“&”视为控制字符。'为防止 JavaScript 引擎解释“<![CDATA[”和“]]>”标记，您可以将它们包装在 cmets 中。

如果您的脚本不包含任何“<”或“&”，则无论如何都不需要CDATA 部分。

【讨论】：

声明“A CDATA 部分根本没有效果”对于（建议的）HTML5 是不正确的，它可以识别结构。 w3.org/TR/html5/syntax.html#cdata-sections
@danorton 有趣。我认为这是一个非常丑陋的组合。但是脚本内容仍然没有影响。
不知道 any </ 里面的脚本标签是坏的。
@SalmanA 这是 HTML 的奇怪之处之一，正式名称为 ETGO。了解更多：mathiasbynens.be/notes/etago（虽然文章指出没有浏览器实现过该功能，但我很确定它给我带来了一些麻烦。也许在其他一些工具中）
实际上我遇到了验证问题——<script>var b = "<b>bold</b>";</script> 验证失败，但在阅读您的答案并更改为<script>var b = "<b>bold<\/b>";</script> 后修复了它。

【解决方案4】：

基本上是允许编写一个既是 XHTML 又是 HTML 的文档。问题是在 XHTML 中，XML 解析器会解释 script 标记中的 &, 字符并导致 XML 解析错误。因此，您可以使用实体编写 JavaScript，例如：

if (a &gt; b) alert('hello world');

但这是不切实际的。更大的问题是，如果您以 HTML 格式阅读页面，标签 script 被认为是“默认”CDATA，这样的 JavaScript 将不会运行。因此，如果您希望同一页面同时使用 XHTML 和 HTML 解析器都正常，您需要将 script 标签包含在 XHTML 中的 CDATA 元素中，而不是将其包含在 HTML 中。

此技巧将 CDATA 元素的开头标记为 JavaScript 注释；在 HTML 中，JavaScript 解析器会忽略 CDATA 标记（它是注释）。在 XHTML 中，XML 解析器（在 JavaScript 之前运行）检测到它并将直到 CDATA 结束的其余部分视为 CDATA。

【讨论】：

【解决方案5】：

这是一个 X(HT)ML 的东西。当您在 JavaScript 中使用 < 和 > 之类的符号时，例如为了比较两个整数，这必须像 XML 一样进行解析，因此它们将标记为标签的开始或结束。

CDATA 表示以下行（直到]]> 的所有内容都不是 XML，因此不应以这种方式解析。

【讨论】：

【解决方案6】：

不在 HTML4 中使用 CDATA，但您应该在 XHTML 中使用 CDATA，并且必须在 XML 中使用 CDATA，如果您有像。

【讨论】：

CDATA 在 HTML4 中无效。简而言之，它不是语法的一部分。 CDATA 是 XML 的一种语法，而 XHTML 是 XML 的子集。因此它应该只在 XML（及其子集）中使用。另一方面，HTML 不是 XML。

【解决方案7】：

当您在页面中嵌入 JavaScript 而不是外部引用时，它可以确保 XHTML 验证正常工作。

XHTML 要求您的页面严格符合 XML 标记要求。由于 JavaScript 可能包含具有特殊含义的字符，因此您必须将其包装在 CDATA 中以确保验证不会将其标记为格式错误。

对于网络上的 HTML 页面，您只需在和标记之间包含所需的 JavaScript。当您验证网页上的 HTML 时，JavaScript 内容被认为是 CDATA（字符数据），因此被验证器忽略。如果您在设置网页时遵循更新的 XHTML 标准，则情况并非如此。在 XHTML 中，脚本标签之间的代码被认为是 PCDATA（已解析的字符数据），因此由验证器处理。

因此，您不能只在页面上的脚本标记之间包含 JavaScript 而不会“破坏”您的网页（至少就验证器而言）。

你可以学习more about CDATA here和more about XHTML here。

【讨论】：

【解决方案8】：

CDATA表示里面的内容不是XML。

这里是对wikipedia的解释

【讨论】：

【解决方案9】：

当您要严格遵守 XHTML 时，您需要 CDATA 小于号，并且不会将与号标记为无效字符。

【讨论】：

【解决方案10】：

在 xhtml 验证期间避免 xml 错误。

【讨论】：

【解决方案11】：

CDATA 告诉浏览器按原样显示文本，而不是将其呈现为 HTML。

【讨论】：

【解决方案12】：

CDATA表示里面的内容不是XML。

【讨论】：

【解决方案13】：

CDATA 在任何 XML 方言中都是必需的，因为 XML 节点中的文本在被评估为 JavaScript 之前被视为子元素。这也是JSLint complains关于正则表达式中<字符的原因。

参考文献

【讨论】：

【解决方案14】：

When you want it to validate（XML/XHTML - 谢谢Loren Segal）。

【讨论】：

【解决方案15】：

这样旧版浏览器不会解析 Javascript 代码，页面不会中断。

向后兼容。一定会喜欢的。

【讨论】：