`
hehch
  • 浏览: 40812 次
  • 性别: 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 部分命令
评论
发表评论

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

相关推荐

    javascript代码应当放在html代码哪个位置比较好_.docx

    在严格的XHTML中，`&lt;script&gt;`标签必须包含在CDATA部分内，否则XHTML解析器可能会将`&lt;script&gt;`标签误认为是XML标签的一部分，导致JavaScript代码无法正确执行。 **代码示例：** ```html &lt;!DOCTYPE ...

    WPF 文字滚动

    在这个例子中，我们直接在WebBrowser控件中加载了一个HTML片段，使用了HTML的`&lt;marquee&gt;`标签来实现文字滚动。`behavior="scroll"`定义了滚动行为，`direction="left"`则指定了滚动方向。 两种方法各有优缺点。动画...

    在Spring中使用dwr

    &lt;script type='text/javascript' src="&lt;%=request.getContextPath()%&gt;/dwr/interface/personAction.js"&gt;&lt;/script&gt; &lt;script type='text/javascript' src='&lt;%=request.getContextPath()%&gt;/dwr/engine.js'&gt;&lt;/script&gt; ...

    PHP cdata 处理(详细介绍)

    13. ']]&gt;'：确认CDATA结束，将CDATA内容进行适当处理（比如使用htmlentities函数编码），然后状态回转到 'out'。 不过，使用状态机处理CDATA部分存在一些局限性，比如它不能很好地处理CDATA内部出现连续的三个或...

    图书管理系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;]...

    页里面 CDATA的作用说明

    在上面的示例中，我们使用JavaScript注释`/*`和`*/`来隐藏CDATA节，以便Internet Explorer正确地解析JavaScript代码。 使用CDATA节可以避免浏览器对特殊字符的解析，但需要注意不同浏览器的兼容性问题。较好的做法...

    Dwr配置详解.doc

    在JavaScript中，可以使用DWR提供的JavaScript对象来调用远程方法： ```javascript var helloDwr = new hello(); alert(helloDwr.hello("张三")); // 张三，您好！您已经开始了DWR的学习之旅，祝您学得开心... ``` ...

    [示例][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;/...

    Element-ui css非网络引用，

    &lt;el-button @click="visible = true"&gt;Button&lt;/el-button&gt; &lt;el-dialog :visible.sync="visible" title="Hello world"&gt; &lt;p&gt;Try Element&lt;/p&gt; &lt;/el-dialog&gt; &lt;/div&gt; &lt;el-button type="primary" icon="el-icon-search...

    XML：标签CDATA用法

    当我们在XML文档中使用CDATA时，通常是出于以下两种情况： 1. **包含特殊字符**：如果文本数据中包含XML保留字符（如`&lt;`, `&`等），使用CDATA可以避免这些字符被误认为是XML标签或实体引用。 2. **包含脚本或样式...

    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 $...

    flex与js交互2

    &lt;script type="text/javascript"&gt; function changeDocumentTitle(newTitle) { document.title = newTitle; return "Title changed successfully!"; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;object id="myFlexApp" data=...

    domino xpages 开发 视图新窗口打开视图连接

    [CDATA[#{javascript:document1.getDocument().getSubject()}]]&gt;&lt;/xp:this.value&gt; &lt;xp:viewColumnHeader value="主题" id="viewColumnHeader1"/&gt; &lt;xp:eventHandler event="onclick" submit="true" refreshMode=...

    flex—JS相互调用

    -- 在&lt;body&gt;中添加调用Flex的按钮 --&gt; &lt;button onclick="callFlex()"&gt;Call App&lt;/button&gt; ``` 其中，`hello.js`文件包含JavaScript函数定义： ```javascript function sayHelloWorld(params) { alert('Hello ...

    javascript语句中的CDATA标签的意义

    2. **跨语言环境中的数据交换**：当JavaScript需要与XML或其他基于XML的语言进行数据交换时，为了确保数据的一致性和完整性，可以在XML文档中使用CDATA来封装JavaScript代码，以避免潜在的解析问题。 3. **提高代码...

    XML应用开发（软件品牌）-1期 1.4 课堂实践-XML文档中使用字符数据段.doc

    总的来说，通过学习XML文档中使用字符数据段，我们可以更有效地处理和存储包含特殊字符或需要保持原始格式的数据，这对于提升软件的稳定性和数据处理能力具有重要意义。在软件品牌相关的XML应用开发中，掌握这一技能...

    dhtmlxTabBar中文帮助文档

    在 `tabbar` 中使用 AJAX 技术实现页面访问 `dhtmlxTabBar` 支持通过 AJAX 加载页面内容。这可以通过两种方式实现： - **在配置文件里设置 AJAX**： ```xml &lt;?xml version="1.0"?&gt; &lt;tabbar hrefmode="ajax"&gt; ...

    XML与WEB Service技术(微软)：实验三 在XML文档中使用DTD .doc

    【XML与WEB Service技术(微软)：实验三 在XML文档中使用DTD】 XML（Extensible Markup Language）是一种标记语言，用于存储和传输结构化数据。它具有自我描述性，允许用户自定义元素和属性，使其在不同的应用程序和...

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