javascript - 为什么在 HTML 5 网站上使用 CDATA？

Question

我最近去了 myspace 网站看看他们是怎么做的 :) 在他们的 HTML 代码中，他们的 HTML 代码中有一段内联 jQuery:

<script type="text/html" id="AutoCompleteResultsTemplate">
<![CDATA[
<* var q = MySpace.Search.Utils.TranslateSpecialChars(this.query); *>
<span class="suggestions">
<*=this.suggestionResource *>
</span>
<ul>
    <* jQuery.each(this.results, function(i,v) {
        jQuery.each(v, function(j, d) {
     *>
    <li data-query="<*=d.displayText *>" data-url="<*= d.url *>">
        <span class="type"><*=d.type *></span>
        <*=MySpace.Search.Utils.HighlightCharacters(d.displayText, q) *>
    </li>
    <* }); 
      }); *>
    <li class="last" data-query="<*=this.query *>" data-url="<*= this.allResultUrl *>">
        <span class="type"><*=this.allResultText *></span>
        <*=this.searchResource *> '<*= this.query *>'
    </li>
</ul>
<iframe></iframe>
]]>
</script>

我以前从未使用过 CDATA，但我知道它用于 XHTML(因此当你有内联 javascript 时，它仍然有效)而 myspace 目前正在使用 HTML 5。他们使用 CDATA 有什么特别的原因吗？提前致谢。

Answer 1

粘贴的代码无效 - 没有结束脚本标签(OP 编辑​​)。 script元素没有id属性(HTML5新增)并且script元素的"text/html"类型无效(在 HTML5 中允许)，内容不是有效的 HTML 或脚本。

这是垃圾。

可能这取决于浏览器由于无效类型属性而忽略内容，然后取决于对id属性的非标准支持，最后可能得到textContent/innerHTML 并对文本做一些事情。

我认为它是垃圾，是通过神秘咒语进行 Web 开发的一个例子。

一种类似的方法是包含具有伪造的 src 属性值和内容的脚本元素。由于 src 属性，内容将被忽略，但可以在以后使用 textContent/innerHTML 检索和使用。至少该方法可以与有效标记一起使用(但仍不推荐)。

编辑

CDATA 节应该节只能与 MathML 或 SVG (http://www.w3.org/TR/html5/syntax.html#cdata-sections) 一起使用。