`
hehch
  • 浏览: 39891 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

javascript 中使用 <![CDATA[ ... ]]>

xhtmlhtmlxmljavascript
阅读更多

根据W3C XHTML 1.0的规定：在XHTML中，因为<和&这两个符号有特殊意义（小于号用于标签的开始标记），所以这两个符号<和&需要转义成&lt;和&amp;。

比如下面的XHTML标准模式代码是错误，因为未使用转义字符（保存为itworks.xhtml文件，用firefox打开）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<title>test</title>
<script type="text/javascript">
if(1<2)
{
alert(‘‘a‘‘);
}
</script>
</head>
<body>
<p>xhtml,It works.
</p>
</body>
</html>

 





如果在javascript中使用转义字符，javascript解释器不理解，无法执行。代码如下：

<script type="text/javascript">
if(1&lt;2)
{
alert(‘‘a‘‘);
}
</script>

按照W3C的规定（http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8）：XHTML中javascript使用CDATA即可，XHTML解析器会把CDATA中的内容当作纯文本处理，不会把<理解为元素开始。

下面这段XHTML标准模式代码，符合W3C XHTML语法，能够执行（保存为itworks.xhtml文件，用firefox打开）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<title>test</title>
<script type="text/javascript">
<![CDATA[
if(1<2)
{
alert(‘‘a‘‘);
}
]]>
</script>
</head>
<body>
<p>xhtml,It works.
</p>
</body>
</html>



上面的代码使用的是XHTML标准模式：application/xhtml+xml。由于IE6、IE7、IE8不支持XHTML标准模式（http://www.cnblogs.com/sink_cup/archive/2010/01/11/IE6_IE7_IE8_not_support_xhtml_but_it_is_not_important.html）等其他原因 ，所以目前XHTML一般使用text/html兼容模式。

下面把代码改成text/html兼容模式（保存为itworks.html，用浏览器打开）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>test</title>
<script type="text/javascript">
<![CDATA[
if(1<2)
{
alert(‘‘a‘‘);
}
]]>
</script>
</head>
<body>
<p>html,It works.
</p>
</body>
</html>



如图所示，这段text/html代码是符合W3C XHTML语法标准的。

但是在IE6、Firefox、Chrome中都不执行上面这段javascript。

根据《HTML兼容性指导方针》（http://www.w3.org/TR/2002/REC-xhtml1-20020801/#C_4），W3C对于这种情况的说明是：

Use external style sheets if your style sheet uses < or & or ]]> or --. Use external scripts if your script uses < or & or ]]> or --.

即：XHTML工作在XML标准模式下（application/xhtml+xml），使用<![CDATA[即可；XHTML工作在兼容模式下（text/html），请使用外部script文件。



为什么浏览器不支持text/html模式下的<![CDATA[呢？

再来看http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8 ：

CDATA sections are recognized by the XML processor and appear as nodes in the Document Object Model

即：CDATA是XML解析器能够识别的。当XHTML工作在兼容模式下（text/html），此时浏览器使用HTML解析器，所以不识别CDATA。



有两种方法能够解决这个问题。

一：工作在html模式下，向新兼容XML解析器，使用下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>test</title>
<script type="text/javascript">
//<![CDATA[
if(1<2)
{
alert(‘‘a‘‘);
}
//]]>
</script>
</head>
<body>
<p>html,It works.
</p>
</body>
</html>

二：工作在html模式下，不兼容XML解析器（来自http://www.w3.org/TR/html401/interact/scripts.html#h-18.3.2），代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>test</title>
<script type="text/javascript">
<!--
if(1<2)
{
alert(‘‘a‘‘);
}
//-->
</script>
</head>
<body>
<p>html,It works.
</p>
</body>
</html>

分享到：
| mvn 部分命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图书管理系radder.aspx

    &lt;script language="javascript" type="text/javascript"&gt; // &lt;!CDATA[ function TABLE1_onclick() { } function TABLE2_onclick() { } function TABLE3_onclick() { } // ]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body style=...

    JS动态可控制左右滚动的图片

    &lt;SCRIPT language=javascript type=text/javascript&gt; &lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!-- var scrollPic_02 = new ScrollPic(); scrollPic_02.scrollContId = "ISL_Cont_1"; //内容容器ID scrollPic_02.arrLeftId = ...

    snoics-reptile 网页爬虫2.0

    [^&lt;&gt;]*["'\s][^&lt;&gt;]*&gt;]]&gt;&lt;/value&gt; &lt;/property&gt; &lt;property name="replaceRegexUrl"&gt; &lt;!-- 替换可能包含URL的字符串 --&gt; &lt;value&gt;&lt;![CDATA[&lt;[^!&lt;&gt;]*\shref\s*=\s*["']?reptile-replace-string["'\s][^&lt;&gt;]*&gt;]...

    [示例][PHP]HTML5解析和序列化的PHP库.zip

    &lt;h1&gt;Hello World&lt;/h1&gt;&lt;p&gt;This is a test of the HTML5 parser.&lt;/p&gt; &lt;hr&gt; &amp; Nobody nowhere. &lt;/section&gt; &lt;test xmlns:foo="http://example.com/foo"&gt;TEST&lt;/test&gt; &lt;![CDATA[Because we can.]]&gt; &copy; &lt;/...

    Xpage学习笔记

    &lt;xp:handler type="text/javascript"&gt; &lt;xp:this.script&gt;&lt;![CDATA[ var numParts = Math.floor(100/7); jsProgress.update({ maximum: numParts, progress:0 }); for (var i=0; i&lt;=...

    JQuery选择器

    &lt;script src="scripts/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $...

    eclipse-testng 离线包下载

    &lt;xsl:output name="xml" method="xml" indent="yes"/&gt; &lt;xsl:output name="html" method="html" indent="yes" omit-xml- declaration="yes"/&gt; &lt;xsl:output name="xhtml" method="xhtml" indent="yes" omit-xml-...

    DWR.xml配置文件说明书(含源码)

    从java中传递null值到javascript是没有任何危险性的,所以DWR将这个作为默认的converter,所以你自己不用再把这个converter添加到配置文件的&lt;allow&gt;部分中去. 基本类型的converter转换int,boolean,double等.当然还包括...

    很好用的腾讯天气预报标签

    腾讯天气预报标签 调用： &lt;script language='JavaScript' type='text/JavaScript' src='...&lt;div id="Wealth"&gt;&lt;/div&gt;&lt;script type="text/javascript"&gt;/*&lt;![CDATA[*/MiniSite.Weather.print("Wealth");/*]]&gt;*/&lt;/script&gt;

    像Excel一样的table表格

    overflow:hidden\"&gt;&lt;div id=\"DataGroup2\" style=\"position:relative\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/td&gt;&lt;td valign=\"top\"&gt;&lt;div id=\"DataFrame3\" style=\"position:relative;background:#000;...

    奥运官方网flash幻灯

    &lt;script src="/images/beijing2008_flashobj.js" type="text/javascript"&gt;&lt;/script&gt; &lt;div class="mainContent"&gt; &lt;div class="focusFlash"&gt; &lt;div id="sasFlashFocus27"&gt;&lt;/div&gt; &lt;SCRIPT type=text/javascript&gt; //&lt;!...

    JavaScript操作XML文件之XML读取方法

    本文实例讲述了JavaScript操作XML文件之XML读取方法。分享给大家供大家参考。具体分析如下： 假设我们现在要读取...[CDATA[张三]]&gt;&lt;/name&gt; &lt;age&gt;22&lt;/age&gt; &lt;/data&gt; &lt;data id=3&gt; &lt;name&gt;jake&lt;/name&gt; &lt;age&gt;23&lt;/age&gt;

    XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

    2.&lt; b&gt;&lt; i&gt;sample&lt; /b&gt;&lt; /i&gt; 3.&lt; td&gt;sample&lt; /TD&gt; 4.&lt; font color=red&gt;samplar&lt; /font&gt; 在XML文档中，上述几种语句的语法都是错误的。因为: 1.所有的标记都必须要有一个相应的结束标记； 2.所有的XML标记都...

    amcharts中文教程(柱状图，饼状图等的中文设置说明)

    &lt;decimals_separator&gt;.&lt;/decimals_separator&gt; &lt;!-- 小数分隔符,默认为[,]注：该属性只是用来显示，而在csv数据文件中，必须使用[.] (string) decimal separator. Note, that this is for displaying data only. ...

    javascript生成/解析dom的CDATA类型的字段的代码

    两段demo代码如下(for ie only)： [removed] //demo1 var xmlDoc = new ... xmlDoc.loadXML(“&lt;a&gt;”); root = xmlDoc.documentElement; CDATASection = xmlDoc.createCDATASection(“Hello W

    树形伸缩导航js效果

    &lt;script type="text/javascript"&gt; // &lt;![CDATA[ var myMenu; window.onload = function() { myMenu = new SDMenu("my_menu"); myMenu.speed = 5; // Menu sliding speed (1 - 5 recomended) myMenu....

    javascript语句中的CDATA标签的意义

    javascript语句中的CDATA标签的意义

    Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

    /**//// &lt;summary&gt; /// 生成带CDATA的节点 /// &lt;/summary&gt; /// &lt;param name=”xDocument”&gt;XmlDocument&lt;/param&gt; /// &lt;param name=”elementName”&gt;元素名称&lt;/param&gt; /// &lt;param name=”cdataValue”&gt;CDATA值&lt;/param...

    javascript sudoku 数独智力游戏生成代码

    代码如下:&lt;p&gt;&lt;input value=”Get New SuDoKu” ...&lt;/p&gt; &lt;table border=”1″ xss=removed id=”mainTable”&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/table&gt; [removed]// &lt;![CDATA[ var sudokuArray = [[],[],[],[],[],[],[],[],[]

    网页中CDATA标记的说明

    CDATA是在XML文档里面使用的关键字，用来告诉浏览器，这部分内容不用解析，是给其他程序用的，比如JAVASCRIPT等等。 PCDATA是在 XML约束文档里...[CDATA[ function matchwo(a,b){ if (a &lt; b&gt; [removed] XML CDATA说明

Magicbox
Global site tag (gtag.js) - Google Analytics