Junstyle's Blog

有时要根据需要动态载入javascript文件。
有两种方式可以实现：

1、利用document.createElement("script")来产生script node，并加到Node Tree中。

[CODE=javascript]
var nav = null;

function loadScript(src) {
var obj = document.createElement("script");
obj.src = src;
var target = document.getElementsByTagName("HEAD")[0];
target.appendChild(obj);
}

function test (src) {
try {
loadScript(src);
setTimeout("alert(nav.getInner())", 100);
} catch (e) {
alert(e);
}
}

test("test.js");
[/CODE]

这个方法有些问题：
1、在firefox中改变不会立刻生效，所以我用setTimeout來延缓测试
2、需要对node做适当的管理，否则会占用不必要的系统资源，但问题应该不大

2、ajax + eval的方法。

[CODE=javascript]
var nav=null;

if (window.execScript == null) {
window.execScript = function(script) {
eval(script);
}
}

function useScript (name) {
try {
var loader = xmlhttp();
loader.open('GET', name, false);
loader.send(null);
window.execScript(loader.responseText.toString());
} catch (e) {
alert(e);
}
}

function test1 (name) {
try {
useScript(name);
alert(nav.getInner());
} catch (e) {
alert(e);
}
}

function xmlhttp()
{
try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){}
try{return new ActiveXObject("Microsoft.XMLHTTP");} catch(e){}
try{return new XMLHttpRequest();} catch(e){}
alert("XMLHttpRequest Object not existed!!");
return null;
}
[/CODE]

在ie上，eval没办法取用到global variables，所以使用window.execScript来代替，並且为firefox的window物件加上这个函数，让两个浏览器可以用同样的方法操作。execScript的第二个参数可以省略，因为预设就是JavaScript，我这裡就偷懒不写了。
loader.responseText应该就是String了，但是在ie上还是要加toString()才能使用。
eval所执行的程式，会参考到执行eval时程式的上下文，所以在ie上会出问题。这一个部份需要在ie跟firefox上详细測试，这两个浏览器处理的方法不一样。根据JavaScript1.5的说明，eval的第二个参数可以指定在那个物件的上下文中执行，但是在ie中不是这样。

要载入的test.js文件

[CODE=javascript]
nav = {
inner: 3,
getInner: function () { return this.inner; }
};
[/CODE]