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

來源:互聯網
上載者:User

一、<script>元素屬性
向XHTML頁面中插入JavaScript的主要方法,就是使用<script>元素,該元素有5個屬性分別為charset、defer、language、src、type,經常使用的是type、src、defer這三個。
1、type屬性的值一般都是text/javascript,該屬性是必須的,<script type=”text/javascript”/>。
2、src屬性的值是*.js外部檔案,該屬性是可選的,<script type=”text/javascript” src=”example.js”/>。
在這個例子中,外部檔案example.js將被載入到當前頁面中。外部檔案只需包含通常要放在開始的<script>和結束的</script>之間的那些Javascript代碼即可。與解析嵌入式Javascript代碼一樣,在解析外部Javascript檔案時,頁面的處理也會暫時的停止。需要注意的是帶有src屬性後就不應該在<script>和</script>之間再包含額外的Javascript代碼。
3、defer屬性的值是”defer”,表示指令碼可以延遲到文檔完全被解析和顯示之後再執行,該屬性是可選的,<script type=”text/javascript” src=”example.js” defer=”defer”/>
二、標籤位置
按照慣例,所有<script>元素都應該放在頁面的<head>元素中,例如: 複製代碼 代碼如下:<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js”/>
</head>
<body>
</body>
</html>

現代Web應用程式一般都把全部Javascript引用放在<body>元素中,放在頁面的內容後面目的是讓使用者感覺到頁面載入速度快了,如下所示: 複製代碼 代碼如下:<html>
<head>
<title></tilte>
</head>
<body>
<!--內容-->
<script type=”text/javascript” src=”example.js”/>
</body>
</html>

三、延遲指令碼
使用defer屬性延遲指令碼,這個屬性的用途是表明指令碼在執行時不會影響頁面的構造。也就是說,指令碼會被延遲到整個頁面都解析完畢後在運行。 複製代碼 代碼如下:<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
</body>
</html>

在這個例子中,雖然我們把<script>元素放在了文檔的<head>元素中,但其中包含的指令碼將延遲到瀏覽器遇到</html>標籤後再執行。
四、CDATA
在XHTML(XML)中,CData片段是文檔中的一個特殊地區,這個地區中可以包含不需要解析的任意格式的常值內容。因此,在CData片段中就可以使用任一字元,而且不會導致語法錯誤。 複製代碼 代碼如下:<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的問題。
五、<noscript>元素
當瀏覽器不支援Javascript或者Javascript被禁用時,包含在<noscript>中的元素才會顯示出來,否則得話儘管頁面中包含<noscript>,但其中的內容並不會被顯示。
如下所示: 複製代碼 代碼如下:<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支援(啟用)Javascript。</p>
</noscript>
</body>
</html>

這個頁面會在指令碼無效的情況下向使用者顯示一條訊息。而在啟用了指令碼的瀏覽器中,使用者永遠也不會看到它——儘管它是頁面的一部分。 複製代碼 代碼如下:<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本頁面需要瀏覽器支援(啟用)JavaScript</p></center>
</noscript>
<!-- 這裡放內容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>

複製代碼 代碼如下:<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本頁面需要瀏覽器支援(啟用)JavaScript</p></center>
</noscript>
<!-- 這裡放內容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>

在以下兩種情況下,上述代碼<p>標記中的內容會顯示出來:
•瀏覽器不支援指令碼
•瀏覽器支援指令碼,但指令碼被禁用。

除此之外,使用者在瀏覽器中永遠看不到<noscript>標記中的內容。

六、小結
把Javascript插入到XHTML中要使用<script>元素。使用這個元素可以把Javascript嵌入到XHTML頁面中,讓指令碼與標記混合在一起;也可以包含外部的Javascript檔案。而我們需要注意的有:
1、這兩種方式都要求吧type屬性的值設定為text/javascript,以表明使用的是Javascript指令碼語言。
2、在包含外部Javascript檔案時,必須將src屬性設定為指向相應檔案的url。而這個檔案即可以好是與包含它的頁面位於同一個伺服器上的檔案,也可以是其他任何域中的檔案。
3、所有<script>元素會按照他們在頁面中出現的先後順序依次被解析。只有在解析完前一個<script>代碼後才會解析下一個<script>代碼。
4、瀏覽器在呈現後面的頁面內容之前,必須先解析完前面<script>元素中的代碼。為此,一般要把<script>元素放在頁面的末尾,放在頁面內容之後和結束的</body>標籤之前。
5、在IE和Firefox中,可以通過設定defer屬性讓瀏覽器在呈現完文檔之後再執行指令碼。其他瀏覽器不支援該屬性。
另外,使用<noscript>元素可以指定在不支援指令碼的瀏覽器中顯示的替代內容。但在啟用了指令碼的情況下,瀏覽器不會顯示<noscript>元素中的任何內容。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.