img.onload与script.onload实现的不同写法

最新推荐文章于 2021-03-10 08:45:00 发布

转载最新推荐文章于 2021-03-10 08:45:00 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/outside/p/3723350.html

文章标签：

#javascript #ViewUI

本文探讨了在不同浏览器中加载外部JavaScript文件时遇到的问题及解决方案。详细介绍了如何使用`onload`和`onreadystatechange`事件确保脚本正确加载，并提供了一段兼容IE与现代浏览器的代码。

在http://www.cnblogs.com/outside/p/3714482.html中，如何使用img.onload已经很清楚，当使用同样的方法创建script就有问题了

var script = document.createElement("script");
script.src = "js/jquery.js";

script.onload = function(){console.log("script")};

这样写的话，本以为能像img一样，控制台输出script,但在firfox,ie（本次测试只在firfox,ie中测试）中均没有输出。

在网上搜索了一下，大概说ie使用的是onreadystatechange事件来监听资源下载状态的改变控制输出，firfox使用onload事件控制资源下载完成后输出。

以下代码在ie中起作用

var script = document.createElement("script");
script.src = "js/jquery.js";
script.onreadystatechange = function(){
　　if(this.readyState === "loaded" || this.readyState === "complete"){//ie7,8只认识complete
　　　　alert("ie");
　　}
}

当onreadystatechange换成script.onload = function(){console.log("script")};来测试，却没有输出，最后通过调试，发现在firfox中需要将script标签添加到dom中去才能触发事件（也即添加到dom中去才开始下载），这点跟ie不同（ie跟script添加src就开始下载资源了）。

最后在网上找了两段兼容代码，代码如下

第一：

var url = "js/jquery.js";
var script = document.createElement("script");
if(script.addEventListener){
　　script.addEventListener("load", callback, false);
}else if(script.attachEvent){
　　script.attachEvent("onreadystatechange", function(){

　　　　var target = window.event.srcElement;

　　　　 if(target.readyState == "loaded" || target.readyState == "complete"){

　　　　　　callback.call(target);

　　　　}

　　});
}
document.getElementsByTagName("head")[0].appendChild(script);

function callback(){
console.log("兼容")
}
script.src=url;

第二：

script.src = "js/jquery.js";

转载于:https://www.cnblogs.com/outside/p/3723350.html