CDATA 内部的所有东西都会被解析器忽略。

假如文本中包含了大量的 "<" 和 "&" 字符 - 就像编程代码中经常出现的情况一样 - 那么这个 XML 元素就可以被定义为一个 CDATA 部分。

CDATA 区段开始于 "<![CDATA[",结束于 "]]>":

<script type="text/javascript">
<![CDATA[
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
]]>
</script>

在上面的例子中,在 CDATA 区段中的所有东西都会被解析器忽略。

关于 CDATA 区段的注释:

CDATA 区段不能包含字符串 "]]>",所以,CDATA 区段的嵌套是不被允许的。

同时也需要确保在 "]]>" 字符串中没有空格或折行。

为什么要使用CDATA:

XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本(XHTML也是如此),这样就可以使用特殊字符,如 小于(<)、大于(>)、和号(&)和双引号("),而不必使用它们的字符实体。考虑下面的代码:

<script type="text/javascript">
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
</script>

这个函数相当简单,它比较数字a和b,然后显示消息说明它们的关系。但是,在XHTML中,这段代码是无效的,因为它使用了三个特殊符号,即小于、 大于和双引号。要修正这个问题,必须分别用这三个字符的XML实体&lt;、&gt;和&quot;替换它们:

<script type="text/javascript">
function compare(a,b)
{
if (a &lt;b)
   {alert(&quot;a小于b&quot;);}  
else if (a&gt;b)
   {alert(&quot;a大于b&quot;);}
else
   {alert(&quot;a等于b&quot;);}
}
</script>

这段代码存在两个问题。首先,开发者不习惯用XML实体编写代码。这使代码很难读懂。其次,在JavaScript中,这种代码实际上将视为有语法 错,因为解释程序不知道XML实体的意思。用CDATA段即可以以常规形式(即易读的语法)编写JavaScript代码。正式加入CDATA段的方法如 下:

<script type="text/javascript">
<![CDATA[
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
]]>
</script>

虽然这是正式方式,但还要记住,大多数浏览器都不完全支持XHTML,这就带来主要问题,即这在JavaScript中是个语法错误,因为大多数浏览器还不认识CDATA段。

<script type="text/javascript">
//<![CDATA[                                            
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
//]]>                                      
</script>

当前使用的解决方案模仿了“对旧浏览器隐藏”代码的方法。使用单行的JavaScript注释"//",可在不影响代码语法的情况下嵌入CDATA段:

现在,这段代码在不支持XHTML的浏览器中也可运行。

但是,为避免CDATA的问题,最好还是用外部文件引入JavaScript代码。

javascript CDATA相关推荐

  1. 动态指定超链接参数的几种方法(Passing a JavaScript variable into href of )

    情景:有些环境下我们需要根据页面中JavaScript变量的值来确定某个(某些)超链接的参数,如"http://www.bla.com/test.aspx?var1="中,究竟va ...

  2. 深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...

  3. JavaScript高级程序设计基本概念

    ECMAscript到底是什么?它和JavaScript的关系?(这个概念我也是百度的) 要讲清楚这个问题,需要回顾历史.1996年11月,JavaScript的创造者Netscape公司,决定将Ja ...

  4. 核心(Core) Javascript 学习手记

    说明: 一字一句都是俺敲出来的, ^^. 转载请注明出处哦. 前些日子, 发现好些地方需要用到 Js 代码, 以前没怎么系统的学习过, 要用到的时候查一堆一堆的手册, 写得不好不说, 还很浪费时间,  ...

  5. javascrit2.0完全参考手册(第二版) 第1章第1节 在XHTML文档中增加javascript

    通常,向文档中增加script脚本使用<script>元素,在HTML中增加脚本的方式有4中: (1)放到<script></script>块中: (2)<s ...

  6. JavaScript精进篇

    JavaScript是所有前端框架中最基础的框架,在工作了两年以后又重新回到了这里.过去两年里用的最多的前端框架是jquery,因为它简单易上手,而jquery就是封装了JavaScript.重新系统 ...

  7. Javascript在页面加载时的执行顺序

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  8. JavaScript高级程序设计(二):在HTML中使用JavaScript

    一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 ...

  9. 让JavaScript像C#一样支持Region

    问题 Web Essentials 是非常给力的js插件,具体的介绍,大家请看这里,最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 . 不过在使用的过程中,让 ...

最新文章

  1. 《计算机网络-自顶向下方法》之什么是因特网?
  2. android 6.0动态权限的申请
  3. boost::fusion::traits::is_sequence用法的测试
  4. Thread——线程
  5. python变量使用前必须先声明、并且一旦声明_初学者学习Python的30天‍-第18天-文件处理...
  6. selinum-操作表单元素-0223
  7. 计算机专业人士,必读之经典图书
  8. SharePoint Welcome.ascx 控件自定义样式的另类解决方式
  9. Java学习系列及数据结构博客全目录
  10. python 文件IO
  11. 如何绘制景区热力图_百度地图“景区热力图” 大数据让你拥有“千里眼”
  12. 知识整理的八种笔记方法
  13. 方差互换(Variance Swap)定价推导及VIX相关介绍
  14. 计算机画图如何把二寸照片修改为一寸,【2人回答】用画图工具怎么制作一寸、二寸照片?-3D溜溜网...
  15. kubernetes Pod 污点与容忍
  16. 工控机安装服务器系统,工控机驱动安装步骤及流程说明
  17. 移动端App广告常见的10种形式
  18. VS code 设置中文后还显示英文问题解决办法,亲测有效!
  19. oppo 手机侧滑快捷菜单_OPPO又搞什么鬼?离奇上弹、侧滑第二屏!
  20. MySQL多表查询练习2

热门文章

  1. Win10安装 oracle11g 出现INS-13001环境不满足最低要求解决方法
  2. ubuntu1404_server搭建lamp
  3. 【编程范式】连续数据的前面部分后移的实现
  4. .Net的类型构造器-static构造函数
  5. JavaEE实战班第十天
  6. Python高能小技巧:用海象操作符减少重复代码
  7. java 可选参数_超干货详解:kotlin(4) java转kotlin潜规则
  8. 阿里二面:group by 怎么优化?
  9. 面试官:Java为什么只有值传递?
  10. 十分钟搞定JeecgBoot 单体升级微服务!