转 - 动态载入及操作外部JS文件的几种方法(未测试)

No.1直接document.write

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

No.2动态改变已有script的src属性

<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>

No.3动态创建script元素
<script>
var s2 = document.createElement("script");
s2.src="test.js"
document.body.insertAdjacentElement("BeforeBegin",s2);
</script>

function LoadObj(){
 if (!document.getElementById) return;
 for (i=0; i<arguments.length; i++)
 {
  var file = arguments[i];
  var fileref = ""
  if (loadedobjects.indexOf(file)==-1)
  { //Check to see if this object has not already been added to page before proceeding
   if (file.indexOf(".js")!=-1)
   { //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
   }
   else if (file.indexOf(".css")!=-1)
   { //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
   }
  }
  if (fileref != "")
  {
   document.getElementsByTagName("head").item(0).appendChild(fileref)
   loadedobjects+=file+" " //Remember this object as being already added to page
  }
 }
};

　Internet Explorer 5.5 和 Netscape 6 在动态载入外部文件方面与以前的版本有所区别，这里所说的“动态”是指：用document.write 来包含外部文件。假如你有一个外部文件如下：

function printMessage() {
alert("这是来自外部文件的信息！！：）");
}
　　现在你想用下面的方法动态载入：


<SCRIPT LANGUAGE="JavaScript">
document.write('<SCRIPT LANGUAGE="JavaScript" SRC="exam.js"></SCRIPT>');
</SCRIPT>
　　现在，你如果当此文件刚载入你就按下面的方法去调用函数 printMessage() 的话，你将得到一个错误。


<SCRIPT LANGUAGE="JavaScript">
document.write('<SCRIPT LANGUAGE="JavaScript" SRC="exam.js"></SCRIPT>');
printMessage();
</SCRIPT>
　　其原因就是：IE5.5和NN6在解释主文件代码时不会等待外部文件完全载入完毕。正确的做法是在载入外部文件后立即关闭<script>：

<SCRIPT LANGUAGE="JavaScript">
document.write('<SCRIPT LANGUAGE="JavaScript" SRC="exam.js"></SCRIPT>');
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
printMessage();
</SCRIPT>

<label id="w1">hloowowo</label>
<button onclick="loadjs('test.js')">loadjs</button>
<button style="display=false" id="j" value="alert" onclick="al(document.getElementById('w1').innerHTML)">jjjjjjjj</button>
/////////////////////////////////////////////////////////////////////////////
<script language="JavaScript" type="text/javascript">
<!--
function JsLoader(){
   this.load=function(url){
   //获取所有的<scrcipt>标记
   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="http://blog.bitscn.com/url";
  
   //获取head结点，并将<script>插入到其中  
   var head=document.getElementsByTagName("head")[0];  
   head.appendChild(s);  
   //获取对象自身的引用 
   var self=this;
   //对于IE浏览器，使用readystatechange事件判断是否载入成功  
   //对于其他浏览器，使用onload事件判断载入是否成功  
   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 loadjs(opjs)
   {
   document.getElementById("j").value="eeeeeeeee";
   var jl=new JsLoader();
   //定义载入成功处理程序
   jl.onsuccess=function()
   { 
   //al("dddd成功了");
   }
   //定义载入失败处理程序
   jl.onfailure=function()
   { 
     alert("文件载入失败！");
   }
   //开始载入
   jl.load(opjs);
   //alert("test.js");
   }
   //-->
</script>

<script type="text/javascript">
    function LoadJs(sSrc){
        var oHead = document.getElementsByTagName('head')[0];
        var oScript = document.createElement('script');oScript.type = "text/javascript";
        oScript.src = sSrc;
        oHead.appendChild(oScript);
    }
</script>