JavaScript中的noscript元素屬性位置及作用介紹
更新時(shí)間:2013年04月11日 16:28:57 作者:
Javascript插入到XHTML中要使用script元素,使用這個(gè)元素可以把Javascript嵌入到XHTML頁面中,讓腳本與標(biāo)記混合在一起,感興趣的朋友可以了解下
一、<script>元素屬性
向XHTML頁面中插入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)前頁面中。外部文件只需包含通常要放在開始的<script>和結(jié)束的</script>之間的那些Javascript代碼即可。與解析嵌入式Javascript代碼一樣,在解析外部Javascript文件時(shí),頁面的處理也會暫時(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)該放在頁面的<head>元素中,例如:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js”/>
</head>
<body>
</body>
</html>
現(xiàn)代Web應(yīng)用程序一般都把全部Javascript引用放在<body>元素中,放在頁面的內(nèi)容后面目的是讓用戶感覺到頁面加載速度快了,如下所示:
<html>
<head>
<title></tilte>
</head>
<body>
<!--內(nèi)容-->
<script type=”text/javascript” src=”example.js”/>
</body>
</html>
三、延遲腳本
使用defer屬性延遲腳本,這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會影響頁面的構(gòu)造。也就是說,腳本會被延遲到整個(gè)頁面都解析完畢后在運(yùn)行。
<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片段中就可以使用任意字符,而且不會導(dǎo)致語法錯(cuò)誤。
<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>元素
當(dāng)瀏覽器不支持Javascript或者Javascript被禁用時(shí),包含在<noscript>中的元素才會顯示出來,否則得話盡管頁面中包含<noscript>,但其中的內(nèi)容并不會被顯示。
如下所示:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支持(啟用)Javascript。</p>
</noscript>
</body>
</html>
這個(gè)頁面會在腳本無效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中,用戶永遠(yuǎn)也不會看到它——盡管它是頁面的一部分。
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本頁面需要瀏覽器支持(啟用)JavaScript</p></center>
</noscript>
<!-- 這里放內(nèi)容 -->
<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>
<!-- 這里放內(nèi)容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>
在以下兩種情況下,上述代碼<p>標(biāo)記中的內(nèi)容會顯示出來:
•瀏覽器不支持腳本
•瀏覽器支持腳本,但腳本被禁用。
除此之外,用戶在瀏覽器中永遠(yuǎn)看不到<noscript>標(biāo)記中的內(nèi)容。
六、小結(jié)
把Javascript插入到XHTML中要使用<script>元素。使用這個(gè)元素可以把Javascript嵌入到XHTML頁面中,讓腳本與標(biāo)記混合在一起;也可以包含外部的Javascript文件。而我們需要注意的有:
1、這兩種方式都要求吧type屬性的值設(shè)置為text/javascript,以表明使用的是Javascript腳本語言。
2、在包含外部Javascript文件時(shí),必須將src屬性設(shè)置為指向相應(yīng)文件的url。而這個(gè)文件即可以好是與包含它的頁面位于同一個(gè)服務(wù)器上的文件,也可以是其他任何域中的文件。
3、所有<script>元素會按照他們在頁面中出現(xiàn)的先后順序依次被解析。只有在解析完前一個(gè)<script>代碼后才會解析下一個(gè)<script>代碼。
4、瀏覽器在呈現(xiàn)后面的頁面內(nèi)容之前,必須先解析完前面<script>元素中的代碼。為此,一般要把<script>元素放在頁面的末尾,放在頁面內(nèi)容之后和結(jié)束的</body>標(biāo)簽之前。
5、在IE和火狐中,可以通過設(shè)置defer屬性讓瀏覽器在呈現(xiàn)完文檔之后再執(zhí)行腳本。其他瀏覽器不支持該屬性。
另外,使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。但在啟用了腳本的情況下,瀏覽器不會顯示<noscript>元素中的任何內(nèi)容。
向XHTML頁面中插入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)前頁面中。外部文件只需包含通常要放在開始的<script>和結(jié)束的</script>之間的那些Javascript代碼即可。與解析嵌入式Javascript代碼一樣,在解析外部Javascript文件時(shí),頁面的處理也會暫時(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)該放在頁面的<head>元素中,例如:
復(fù)制代碼 代碼如下:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js”/>
</head>
<body>
</body>
</html>
現(xiàn)代Web應(yīng)用程序一般都把全部Javascript引用放在<body>元素中,放在頁面的內(nèi)容后面目的是讓用戶感覺到頁面加載速度快了,如下所示:
復(fù)制代碼 代碼如下:
<html>
<head>
<title></tilte>
</head>
<body>
<!--內(nèi)容-->
<script type=”text/javascript” src=”example.js”/>
</body>
</html>
三、延遲腳本
使用defer屬性延遲腳本,這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會影響頁面的構(gòu)造。也就是說,腳本會被延遲到整個(gè)頁面都解析完畢后在運(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片段中就可以使用任意字符,而且不會導(dǎo)致語法錯(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的問題。
五、<noscript>元素
當(dāng)瀏覽器不支持Javascript或者Javascript被禁用時(shí),包含在<noscript>中的元素才會顯示出來,否則得話盡管頁面中包含<noscript>,但其中的內(nèi)容并不會被顯示。
如下所示:
復(fù)制代碼 代碼如下:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支持(啟用)Javascript。</p>
</noscript>
</body>
</html>
這個(gè)頁面會在腳本無效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中,用戶永遠(yuǎn)也不會看到它——盡管它是頁面的一部分。
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本頁面需要瀏覽器支持(啟用)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;">本頁面需要瀏覽器支持(啟用)JavaScript</p></center>
</noscript>
<!-- 這里放內(nèi)容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>
在以下兩種情況下,上述代碼<p>標(biāo)記中的內(nèi)容會顯示出來:
•瀏覽器不支持腳本
•瀏覽器支持腳本,但腳本被禁用。
除此之外,用戶在瀏覽器中永遠(yuǎn)看不到<noscript>標(biāo)記中的內(nèi)容。
六、小結(jié)
把Javascript插入到XHTML中要使用<script>元素。使用這個(gè)元素可以把Javascript嵌入到XHTML頁面中,讓腳本與標(biāo)記混合在一起;也可以包含外部的Javascript文件。而我們需要注意的有:
1、這兩種方式都要求吧type屬性的值設(shè)置為text/javascript,以表明使用的是Javascript腳本語言。
2、在包含外部Javascript文件時(shí),必須將src屬性設(shè)置為指向相應(yīng)文件的url。而這個(gè)文件即可以好是與包含它的頁面位于同一個(gè)服務(wù)器上的文件,也可以是其他任何域中的文件。
3、所有<script>元素會按照他們在頁面中出現(xiàn)的先后順序依次被解析。只有在解析完前一個(gè)<script>代碼后才會解析下一個(gè)<script>代碼。
4、瀏覽器在呈現(xiàn)后面的頁面內(nèi)容之前,必須先解析完前面<script>元素中的代碼。為此,一般要把<script>元素放在頁面的末尾,放在頁面內(nèi)容之后和結(jié)束的</body>標(biāo)簽之前。
5、在IE和火狐中,可以通過設(shè)置defer屬性讓瀏覽器在呈現(xiàn)完文檔之后再執(zhí)行腳本。其他瀏覽器不支持該屬性。
另外,使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。但在啟用了腳本的情況下,瀏覽器不會顯示<noscript>元素中的任何內(nèi)容。
相關(guān)文章
ES6新語法Object.freeze和Object.seal基本使用
這篇文章主要為大家介紹了ES6新語法Object.freeze和Object.seal基本使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01通過實(shí)踐編寫優(yōu)雅的JavaScript代碼
這篇文章主要介紹了如何通過實(shí)踐編寫優(yōu)雅的JavaScript代碼。文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面我們來學(xué)習(xí)一下吧2019-05-05js 限制數(shù)字 js限制輸入實(shí)現(xiàn)代碼
在工作中經(jīng)常會遇到j(luò)s限制輸入方面的要求,本文將詳細(xì)介紹其實(shí)現(xiàn)原理,需要的朋友可以參考下2012-12-12javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法,涉及javascript隨機(jī)數(shù)及針對數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08javascript相等運(yùn)算符與等同運(yùn)算符詳細(xì)介紹
不管是java、c++、php都有相等運(yùn)算符與等同運(yùn)算符,當(dāng)然javasript也不例外,下面介紹一下2013-11-11JavaScript函數(shù)的特性與應(yīng)用實(shí)踐深入詳解
這篇文章主要介紹了JavaScript函數(shù)的特性與應(yīng)用實(shí)踐,結(jié)合實(shí)例形式較為深入的分析了javascript函數(shù)相關(guān)概念、特性、用法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12