转 - 动态载入及操作外部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>