script.onload 事件

最新推荐文章于 2022-12-25 19:48:00 发布

cai555

最新推荐文章于 2022-12-25 19:48:00 发布

阅读量2k

点赞数 1

分类专栏： javascript 文章标签： IE Mootools JavaScript PHP HTML ViewUI

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

如果你执行以下代码会出现什么情况？

<html><head><script type="text/javascript">document.write("<script type=\"text/javascript\" src=\"http://dhtmlkitchen.com/editor/js/drag.js\"><\/script><script type=\"text/javascript\">alert(\"Listener.cleanUp (nested):\" + Listener.cleanUp)<\/script>");</script></head><body/></html>

在IE浏览器里面，它会告诉你Listener为定义，为什么？因为，在IE里面它会先执行alert(...同时加载drag.js。当它执行

 Listener.cleanUp

的时候drag.js还没有load完，这个时候Listener当然未定义。

怎么解决这个问题呢？要是script有个onload事件就好了，事实上在FF里面script的确有个onload事件（实际上FF比较聪明一点，如果Listener为定义，它会等等看看drag.js里面有没有定义，所以在FF里面不会说Listener为定义），但是在IE里面没有直接定义这个事件，所以要变通一下：

<script>
function loadScript(src, callback) {
var script = document.createElement("script");

if(script.addEventListener)
script.addEventListener("load", callback, false);
else if(script.attachEvent)
script.attachEvent("onreadystatechange",
function() { loadScript.callbackIE(callback); });

script.src = src;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript.callbackIE = function(callback) {
var target = window.event.srcElement;
if(target.readyState == "loaded")
callback.call(target);
};

// load 30k script.
// Listener.cleanUp is defined at the bottom of drag.js
callback = function() {
var self = this;
alert("Loaded: " + this.src + "\nListener.cleanUp (nested):" + Listener.cleanUp);
};
loadScript("http://dhtmlkitchen.com/editor/js/drag.js", callback);
</script>

在IE里面应该用：onreadystatechange事件，现在在运行一下新的代码，看看是不是可以了？

以上代码在FF,IE6,IE7下测试通过。

代码引用自：http://codingforums.com/archive/index.php?t-85692.html

注意这个帖子里面最后有位仁兄"KC-Luck"写了一个简化的版本，实际上在IE里面是无效的（可能是因为他用了"complete"事件的缘故）