動態載入js幾種方法

1、直接document.write

<script language="javascript">

    document.write("<script src='test.js'><//script>");

</script>

 

2、動態改變已有script的src屬性

<script src='' id="s1"></script>

<script language="javascript">

    s1.src="test.js"

</script>

 

3、動態建立script元素

<script>

    var oHead = document.getElementsByTagName('HEAD').item(0);

    var oScript= document.createElement("script");

    oScript.type = "text/javascript";

    oScript.src="test.js";

    oHead.appendChild( oScript);

</script>

 

　　這三種方法都是非同步執行的，也就是說，在載入這些指令碼的同時，首頁面的指令碼繼續運行，如果用以上的方法，那下面的代碼將得不到預期的效果。

要動態載入的JS指令碼：a.js，以下是該檔案的內容。

var  str = "中國";

alert( "這是a.js中的變數：" + str );

 

首頁面代碼：

<script language="JavaScript">

function LoadJS( id, fileUrl )

{

    var scriptTag = document.getElementById( id ); 

    var oHead = document.getElementsByTagName('HEAD').item(0);

    var oScript= document.createElement("script");

    if ( scriptTag  ) oHead.removeChild( scriptTag  ); 

    oScript.id = id; 

    oScript.type = "text/javascript"; 

    oScript.src=fileUrl ; 

    oHead.appendChild( oScript); 

}

LoadJS( "a.js" );

alert( "首頁面動態載入a.js並取其中的變數：" + str );

</script>