JavaScript在XHTML文档中的正确嵌入方式

XHTML中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>

XML解析与语法错误

HTML中<script>元素有特定解析规则，但XHTML中不适用。因小于号（<）在XHTML中被视为标签起始，且标签后不能跟空格，故导致语法错误。

解决方案：实体替换与CDATA

解决方案包括：一、将代码中小于号（<）替换为HTML实体（&lt;）；二、使用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>

推荐写法：注释包裹CDATA

方法一虽使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>

此格式在现代浏览器中均可正常使用。

过时方案：HTML注释隐藏

附：不推荐使用的语法

[javascript]

 
<script><!--
function sayHi(){
alert("Hi!);
} 
--></script>
<script><!--
function sayHi(){
alert("Hi!);
} 
--></script>

将JavaScript代码置于HTML注释中，可使不支持<script>元素的浏览器忽略其内容。支持JavaScript的浏览器需进一步解析以确定是否包含需执行的代码。

尽管该注释格式获所有浏览器认可且能正确解释，鉴于所有浏览器均已支持JavaScript，此格式已无必要使用。