快捷導(dǎo)航

JavaScript中的noscript元素屬性位置及作用介紹

更新時(shí)間：2013年04月11日 16:28:57 作者：

Javascript插入到XHTML中要使用script元素，使用這個(gè)元素可以把Javascript嵌入到XHTML頁(yè)面中，讓腳本與標(biāo)記混合在一起，感興趣的朋友可以了解下

一、<script>元素屬性
向XHTML頁(yè)面中插入JavaScript的主要方法，就是使用<script>元素，該元素有5個(gè)屬性分別為charset、defer、language、src、type，經(jīng)常使用的是type、src、defer這三個(gè)。
1、type屬性的值一般都是text/javascript，該屬性是必須的,<script type=”text/javascript”/>。
2、src屬性的值是*.js外部文件，該屬性是可選的,<script type=”text/javascript” src=”example.js”/>。
在這個(gè)例子中，外部文件example.js將被加載到當(dāng)前頁(yè)面中。外部文件只需包含通常要放在開(kāi)始的<script>和結(jié)束的</script>之間的那些Javascript代碼即可。與解析嵌入式Javascript代碼一樣，在解析外部Javascript文件時(shí)，頁(yè)面的處理也會(huì)暫時(shí)的停止。需要注意的是帶有src屬性后就不應(yīng)該在<script>和</script>之間再包含額外的Javascript代碼。
3、defer屬性的值是”defer”,表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行，該屬性是可選的，<script type=”text/javascript” src=”example.js” defer=”defer”/>
二、標(biāo)簽位置
按照慣例，所有<script>元素都應(yīng)該放在頁(yè)面的<head>元素中，例如：

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

 
<html> 
<head> 
<title></tilte> 
<script type=”text/javascript” src=”example.js”/> 
</head> 
<body> 
</body> 
</html> 

現(xiàn)代Web應(yīng)用程序一般都把全部Javascript引用放在<body>元素中，放在頁(yè)面的內(nèi)容后面目的是讓用戶感覺(jué)到頁(yè)面加載速度快了，如下所示：

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

 
<html> 
<head> 
<title></tilte> 
</head> 
<body> 
<!--內(nèi)容--> 
<script type=”text/javascript” src=”example.js”/> 
</body> 
</html> 

三、延遲腳本
使用defer屬性延遲腳本，這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后在運(yùn)行。

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

 
<html> 
<head> 
<title></tilte> 
<script type=”text/javascript” src=”example.js” defer=”defer”/> 
</head> 
<body> 
</body> 
</html> 

在這個(gè)例子中，雖然我們把<script>元素放在了文檔的<head>元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。
四、CDATA
在XHTML(XML)中，CData片段是文檔中的一個(gè)特殊區(qū)域，這個(gè)區(qū)域中可以包含不需要解析的任意格式的文本內(nèi)容。因此，在CData片段中就可以使用任意字符，而且不會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤。

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

 
<script> 
// <![CDATA[ 
function compare(a,b){ 
if(a<b){ 
alert(“A is less than B”) ; 
}else if(a>b){ 
alert(“A is greater than B”) ; 
}else { 
alert(“A is equal to B”) ; 
} 
} 
//]]> 
</script> 

加入雙斜線注釋是為了解決瀏覽器不兼容XHTML的問(wèn)題。
五、<noscript>元素
當(dāng)瀏覽器不支持Javascript或者Javascript被禁用時(shí)，包含在<noscript>中的元素才會(huì)顯示出來(lái)，否則得話盡管頁(yè)面中包含<noscript>，但其中的內(nèi)容并不會(huì)被顯示。
如下所示：

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

 
<html> 
<head> 
<title></tilte> 
<script type=”text/javascript” src=”example.js” defer=”defer”/> 
</head> 
<body> 
<noscript> 
<p>本頁(yè)面需要瀏覽器支持(啟用)Javascript。</p> 
</noscript> 
</body> 
</html> 

這個(gè)頁(yè)面會(huì)在腳本無(wú)效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中，用戶永遠(yuǎn)也不會(huì)看到它——盡管它是頁(yè)面的一部分。

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

 
<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<noscript> 
<center><p style="color:red; font-size:26px;">本頁(yè)面需要瀏覽器支持（啟用）JavaScript</p></center> 
</noscript> 
<!-- 這里放內(nèi)容 --> 
<script type="text/javascript"> 
alert(1); 
</script> 
</body> 
</html> 

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

 
<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<noscript> 
<center><p style="color:red; font-size:26px;">本頁(yè)面需要瀏覽器支持（啟用）JavaScript</p></center> 
</noscript> 
<!-- 這里放內(nèi)容 --> 
<script type="text/javascript"> 
alert(1); 
</script> 
</body> 
</html> 

在以下兩種情況下，上述代碼<p>標(biāo)記中的內(nèi)容會(huì)顯示出來(lái)：
•瀏覽器不支持腳本
•瀏覽器支持腳本，但腳本被禁用。

除此之外，用戶在瀏覽器中永遠(yuǎn)看不到<noscript>標(biāo)記中的內(nèi)容。

六、小結(jié)
把Javascript插入到XHTML中要使用<script>元素。使用這個(gè)元素可以把Javascript嵌入到XHTML頁(yè)面中，讓腳本與標(biāo)記混合在一起；也可以包含外部的Javascript文件。而我們需要注意的有：
1、這兩種方式都要求吧type屬性的值設(shè)置為text/javascript，以表明使用的是Javascript腳本語(yǔ)言。
2、在包含外部Javascript文件時(shí)，必須將src屬性設(shè)置為指向相應(yīng)文件的url。而這個(gè)文件即可以好是與包含它的頁(yè)面位于同一個(gè)服務(wù)器上的文件，也可以是其他任何域中的文件。
3、所有<script>元素會(huì)按照他們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析。只有在解析完前一個(gè)<script>代碼后才會(huì)解析下一個(gè)<script>代碼。
4、瀏覽器在呈現(xiàn)后面的頁(yè)面內(nèi)容之前，必須先解析完前面<script>元素中的代碼。為此，一般要把<script>元素放在頁(yè)面的末尾，放在頁(yè)面內(nèi)容之后和結(jié)束的</body>標(biāo)簽之前。
5、在IE和火狐中，可以通過(guò)設(shè)置defer屬性讓瀏覽器在呈現(xiàn)完文檔之后再執(zhí)行腳本。其他瀏覽器不支持該屬性。
另外，使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。但在啟用了腳本的情況下，瀏覽器不會(huì)顯示<noscript>元素中的任何內(nèi)容。

您可能感興趣的文章: