JavaScript在XHTML中的用法详解
时间：2022-03-17 09:53:03|栏目：JavaScript代码|点击： 次
编写XHTML代码的规则要比编写HTML要严格得多，类似下面的代码在HTML中是有效的，但在XHTML中则是无效的。
[javascript]
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
在HTML中，有特殊的规则用以确定<script>元素中的哪些内容可以被解析，但这些规则在XHTML中不适用。因为小于号（<）在XHTML中将被当作开始一个新标签来解析。但是作为标签，小于号后面不能跟空格，因此导致语法错误。
解决方法有两个：一、用相应的HTML实体（<）替换代码中所有的小于号（<）；二、使用一个CData片段来包含JavaScript代码。
方法一相应代码：
[javascript]
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
方法二相应代码：
[javascript]
<script type="text/javascript"><![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
]]></script>
<script type="text/javascript"><![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
]]></script>
方法一虽然可以让代码在XHTML中正常运行，但却导致代码不好理解了；而方法二在兼容XHTML的浏览器中可以解决问题。但不少浏览器并不兼容XHTML，因而不支持CData片段。所以再使用JavaScript注释将CData标记注释掉。
相应代码：
[html]
<script type="text/javascript">
//<![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
//]]>
</script>
这种格式在所有现代浏览器中都可以正常使用。
附：不推荐使用的语法
[javascript]
<script><!--
function sayHi(){
alert("Hi!);
}
//--></script>
<script><!--
function sayHi(){
alert("Hi!);
}
//--></script>
像上面这样把JavaScript代码包含在一个HTML注释中可以让不支持<script>元素的浏览器隐藏嵌入的JavaScript代码，即忽略<script>标签中的内容，而那些支持JavaScript的浏览器在遇到这种情况时，则必须进一步确认其中是否包含需要解析的JavaScript代码。
虽然这种注释格式得到了所有浏览器的认可，也能被正确的解释，但由于所有浏览器都已经支持JavaScript，因此也就没有必要再使用这种格式了。
[javascript]
复制代码 代码如下:
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
在HTML中，有特殊的规则用以确定<script>元素中的哪些内容可以被解析，但这些规则在XHTML中不适用。因为小于号（<）在XHTML中将被当作开始一个新标签来解析。但是作为标签，小于号后面不能跟空格，因此导致语法错误。
解决方法有两个：一、用相应的HTML实体（<）替换代码中所有的小于号（<）；二、使用一个CData片段来包含JavaScript代码。
方法一相应代码：
[javascript]
复制代码 代码如下:
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
方法二相应代码：
[javascript]
复制代码 代码如下:
<script type="text/javascript"><![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
]]></script>
<script type="text/javascript"><![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
]]></script>
方法一虽然可以让代码在XHTML中正常运行，但却导致代码不好理解了；而方法二在兼容XHTML的浏览器中可以解决问题。但不少浏览器并不兼容XHTML，因而不支持CData片段。所以再使用JavaScript注释将CData标记注释掉。
相应代码：
[html]
复制代码 代码如下:
<script type="text/javascript">
//<![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
//]]>
</script>
这种格式在所有现代浏览器中都可以正常使用。
附：不推荐使用的语法
[javascript]
复制代码 代码如下:
<script><!--
function sayHi(){
alert("Hi!);
}
//--></script>
<script><!--
function sayHi(){
alert("Hi!);
}
//--></script>
像上面这样把JavaScript代码包含在一个HTML注释中可以让不支持<script>元素的浏览器隐藏嵌入的JavaScript代码，即忽略<script>标签中的内容，而那些支持JavaScript的浏览器在遇到这种情况时，则必须进一步确认其中是否包含需要解析的JavaScript代码。
虽然这种注释格式得到了所有浏览器的认可，也能被正确的解释，但由于所有浏览器都已经支持JavaScript，因此也就没有必要再使用这种格式了。
