在XHTML中使用JavaScript脚本

课后整理 2020-12-20

XHTML(EXtensible HyperText Markup Language)表示可扩展超文本标记语言,是将HTML作为XML的应用而重新定义的一个标准。编写XHTML代码的规则要比编写HTML严格得多,而且直接影响能否在嵌入JavaScript代码时使用<script/>标签。

【提示】

将页面的MIME类型指定为application/xhtml+xml.的情况下会触发XHTML模式,当然并不是所有浏览器都支待以这种方法。

【示例】下面代码块虽然在HTML中是有效的,但在XHTML中则是无效的。

<script  type="text/javascript">
function test(a,b){
   if(a < b){
       alert(a + "<" + b);
   }
   else if(a > b){
       alert(a + ">" + b);
   }
   else{
       alert(a + "=" + b);
   }
}
test(1,3);
</script>

在HTML中,有特殊的规则用以确定<script>标签中的哪些内容可以被解析,但这些特殊的规则在XHTML中不适用。例如,上面代码中比较语句a<b中的小于号(<)在XHTML中将被当作开始一个新标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此就会导致语法错误。

避免在XHTML中出现类似语法错误的方法:

方法一,使用相应的HTML转码(&1t;)替换代码中所有的小于号(<),替换后的代码类似如下所示:

<script  type="text/javascript">
function test(a,b){
   if(a &lt; b){
       alert(a + "<" + b);
   }
   else if(a > b){
       alert(a + ">" + b);
   }
   else{
       alert(a + "=" + b);
   }
}
</script>

虽然,这样可以让代码在XHTML中正常运行,但却导致代码不好理解了。

方法二,使用一个CData片段来包含JavaScript代码。在XHTML中,CData片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData片段中就可以使用任意字符,且不会导致语法错误。引入CData片段后的JavaScript代码块如下所示:

<script  type="text/javascript"><![CDATA[
function  test(a,b){
   if(a < b){
       alert(a + "<" + b);
   }
   else if(a > b){
       alert(a + ">" + b);
   }
   else{
       alert(a + "=" + b);
   }
}
]]></script>

在兼容XHTML的浏览器中,这个方法可以解决问题。但实际上,还有不少浏览器不兼容XHTML,因而不支持CData片段。这时可以使用JavaScript注释将CData标记注释掉就可以了:

<script  type="text/javascript">
//<![CDATA[
function test(a,b){
   if(a < b){
       alert(a + "<" + b);
   }
   else if(a > b){
       alert(a + ">" + b);
   }
   else{
       alert(a + "=" + b);
   }
}
test(1,3);
//]]>
</script>

这样在所有现代浏览器中都可以正常使用,它能通过XHTML验证,而且能够兼容XHTML之前的浏览器。