快捷導(dǎo)航

JavaScript在XHTML中的用法詳解

更新時間：2013年04月11日 16:36:06 作者：

下面的代碼在HTML中是有效的，但在XHTML中則是無效的接下來為大家介紹下JavaScript在XHTML中的用法，感興趣的朋友可以參考下哈

編寫XHTML代碼的規(guī)則要比編寫HTML要嚴(yán)格得多，類似下面的代碼在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中，有特殊的規(guī)則用以確定<script>元素中的哪些內(nèi)容可以被解析，但這些規(guī)則在XHTML中不適用。因為小于號（<）在XHTML中將被當(dāng)作開始一個新標(biāo)簽來解析。但是作為標(biāo)簽，小于號后面不能跟空格，因此導(dǎo)致語法錯誤。
解決方法有兩個：一、用相應(yīng)的HTML實體（<）替換代碼中所有的小于號（<）；二、使用一個CData片段來包含JavaScript代碼。
方法一相應(yīng)代碼：
[javascript]

復(fù)制代碼代碼如下:

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

方法二相應(yīng)代碼：
[javascript]

復(fù)制代碼代碼如下:

 
<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中正常運行，但卻導(dǎo)致代碼不好理解了；而方法二在兼容XHTML的瀏覽器中可以解決問題。但不少瀏覽器并不兼容XHTML，因而不支持CData片段。所以再使用JavaScript注釋將CData標(biāo)記注釋掉。
相應(yīng)代碼：
[html]

復(fù)制代碼代碼如下:

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

這種格式在所有現(xiàn)代瀏覽器中都可以正常使用。
附：不推薦使用的語法
[javascript]

復(fù)制代碼代碼如下:

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

像上面這樣把JavaScript代碼包含在一個HTML注釋中可以讓不支持<script>元素的瀏覽器隱藏嵌入的JavaScript代碼，即忽略<script>標(biāo)簽中的內(nèi)容，而那些支持JavaScript的瀏覽器在遇到這種情況時，則必須進(jìn)一步確認(rèn)其中是否包含需要解析的JavaScript代碼。

雖然這種注釋格式得到了所有瀏覽器的認(rèn)可，也能被正確的解釋，但由于所有瀏覽器都已經(jīng)支持JavaScript，因此也就沒有必要再使用這種格式了。