快捷導(dǎo)航

JS代碼放在head和body中的區(qū)別分析

更新時(shí)間：2011年12月01日 00:02:08 作者：

放在head中的JS代碼會在頁面加載完成之前就讀取，而放在body中的JS代碼，會在整個(gè)頁面加載完成之后讀取

那么有什么不同呢？先看一個(gè)例子：
一個(gè)二級級聯(lián)動(dòng)態(tài)下拉列表框，一級分類（即大類別）id="vSort0".

 
<head> 
function changelocation(id) 
{…………} 
</head> 
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select> 
……………… 
</body> 

現(xiàn)在有個(gè)js腳本：

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

 
<script LANGUAGE= "JavaScript" > 
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一個(gè)一級分類的二級分類，去掉后第一個(gè)一級分類的二級分類在頁面載入之后不顯示?；剡x才顯示。將一級分類的value傳給changelocation()函數(shù),生成二級分類的列表 
</script> 

那么把這個(gè)js腳本放head里面還是body里面呢？
答案是不僅要放到body里面，而且還得放到定義id='vSort0'的列表框后面，因?yàn)檫@個(gè)js腳本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，頁面加載后順序執(zhí)行代碼，執(zhí)行到這個(gè)js發(fā)現(xiàn)vSort0未定義（即undefind），這個(gè)js也就失去了作用。
而為什么我們經(jīng)?？吹接泻芏嗟娜税裫s腳本放到head里面沒事呢？對！
就是因?yàn)槟憧吹降脑趆ead里的js代碼有onclick等事件傳遞了變量給函數(shù)。
這就告訴我們，如果我們想定義一個(gè)全局對象，而這個(gè)對象與頁面中的某個(gè)按鈕（等等）有關(guān)時(shí)，我們必須將其放入body中，道理很明顯：如果放入head，那當(dāng)頁面加載head部分的時(shí)候，那個(gè)按鈕（等等）都還沒有被定義（也可以說是還沒有被加載，因?yàn)榧虞d的過程就是執(zhí)行代碼的過程，包括了定義），你能得到的只可能是一個(gè)undefind。

您可能感興趣的文章: