一般來說如果一次性的載入所有需要的JavaScript代碼，就會造成初始網頁打開速度變慢，但是很多載入的代碼又并不需要使用，這種無謂的性能浪費應該予以避免。如果要動態載入JavaScript代碼,可以利用DOM模型在HTML文檔中添加<script>結點，并將此結點的src屬性（即 外聯 Javascript文件）設置為需要動態載入的JavaScript代碼。
下面就是完成這樣功能的一個示例：
(1)、新建JsLoaderTest.html文件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>按需載入JavaScript代碼的例子</title> <script type="text/javascript"> function JsLoader(){ this.load=function(url){ //獲取所有的<script>標記 var ss=document.getElementsByTagName("script"); //判斷指定的文件是否已經包含，如果已包含則觸發onsuccess事件并返回 for (i=0;i<ss.length;i++){ if (ss[i].src && ss[i].src.indexOf(url)!=-1){ this.onsuccess(); return; } } //創建script結點,并將其屬性設為外聯JavaScript文件 s=document.createElement("script"); s.type="text/javascript"; s.src=url; //獲取head結點，并將<script>插入到其中 var head=document.getElementsByTagName("head")[0]; head.appendChild(s); //獲取自身的引用 var self=this; //對于IE瀏覽器，使用readystatechange事件判斷是否載入成功 //對于其他瀏覽器，使用onload事件判斷載入是否成功 //s.onload=s.onreadystatechange=function(){ s.onload=s.onreadystatechange=function(){ //在此函數中this指針指的是s結點對象，而不是JsLoader實例, //所以必須用self來調用onsuccess事件，下同。 if (this.readyState && this.readyState=="loading") return; self.onsuccess(); } s.onerror=function(){ head.removeChild(s); self.onfailure(); } }; //定義載入成功事件 this.onsuccess=function(){}; //定義失敗事件 this.onfailure=function(){}; } function btnClick(){ //創建對象 var jsLoader=new JsLoader(); //定義載入成功處理程序 jsLoader.onsuccess=function(){ sayHello(); } //定義載入失敗處理程序 jsLoader.onfailure=function(){ alert("文件載入失敗！"); } //開始載入 jsLoader.load("hello.js"); } </script> </head> <body> <label> <input type="submit" name="Submit" onClick="javascript:btnClick()" value="載入JavaScript文件"> </label> </body> </html> (2)、新建hello.js文件,包含如下代碼：
// JavaScript Document function sayHello(){ alert("Hello World!成功載入JavaScript文件"); } // JavaScript Documentfunction sayHello(){ alert("Hello World!成功載入JavaScript文件"); }新聞熱點
疑難解答
