IE8中动态创建script标签onload无效的解决方法

网友投稿 356 2023-08-05


IE8中动态创建script标签onload无效的解决方法

本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下:

今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。

代码如下:

复制代码 代码如下:

var loadjs = function(src, fun){

    var script = null;

    script = document.createElement("script");

    script.type = "text/javascript";

    script.src = src;

    if(typeof fun === "function"){

        script.onload = fun;

    }

 

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

};

 

loadJs("js/jquery-1.11.0.min.js", function(){

    console.log("From jQuery");         

});

 

loadJs("test.js", function(){

    console.log("From test.js");         

});

test.js:

console.log(typeof jQuery);

运行结果:

复制代码 代码如下:

undefined  // test.js运行时,jQuery还未加载

>> typeof jQuery  // 从控制台上运行,却找到了jQuery对象,证明加载顺序问题

"function"

并且以上代码中script.onload并没有执行,明明代码已经加载进来了,为什么还是onload不执行呢?到网上一查发现众多前端开发人员都遇到这个棘手的问题,于是找到了一些替补方案,如下:

复制代码 代码如下:

var loadJs = function(src, fun){

    var script = null;

    script = document.createElement("script");

    script.type = "text/javascript";

    script.src = src;

    if(typeof fun === "function"){

        script.onreadystatechange = function() {

            var r = script.readyState;

            console.log(src + ": " + r);

            if (r === 'loaded' || r === 'complete') {

                script.onreadystatechange = null;

                fun();

            }

        };

    }

 

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

};

执行结果:

复制代码 代码如下:

undefined 

js/jquery-1.11.0.min.js: loading 

test.js: complete 

From test.js 

js/jquery-1.11.0.min.js: loaded 

From jQuery

执行步骤为,这下类似于onload的功能算然算是找到了,但却有一个问题,它不是按顺序加载的,当jQuery文件loading的时候,test.js已经complete了,并且第一行就先执行了test.js的内容。因为test.js先于jQuery执行,所以才打出undefined。于是我们可以改写成这样,让它线性加载:

复制代码 代码如下:

loadJs("js/jquery-1.11.0.min.js", function(){

 

    console.log("From jQuery"); 

 

    loadJs("test.js", function(){

        console.log("From test.js");         

    });       

});

执行结果:

复制代码 代码如下:

js/jquery-1.11.0.min.js: loading 

js/jquery-1.11.0.min.js: lnNTTMoaded 

From jQuery 

function

test.js: complete 

From test.js

这次,执行的顺序完全是按照我们预订的顺序来了,但以上代码看着很别扭,需要层层嵌套,于是又发现了这种写法:

复制代码 代码如下:

var loadJs = function(src, fun){

    var script = null;

    script = document.createElement("script");

    script.type = "text/javascript";

    script.src = src;

    if(typeof fun === "function"){

        script.onreadystatechange = function() {

            var r = script.readyState;

            console.log(src + ": " + r);

            if (r === 'loaded' || r === 'complete') {

                script.onreadystatechange = null;

                fun();

            }

        };

    }

 

    document.write(script.outerHTML);

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

 

};

 

loadJs("js/jquery-1.11.0.min.js", function(){

    console.log("From jQuery"); 

});

 

loadJs("test.js", function(){

    console.log("From test.js");         

});

执行结果的顺序,也不相同:

复制代码 代码如下:

function

js/jquery-1.11.0.min.js: loaded 

From jQuery 

test.js: loaded 

From test.js

如果你改变一下加载顺序

复制代码 代码如下:

loadJs("test.js", function(){

    console.log("From test.js");         

});

 

loadJs("jnNTTMs/jquery-1.11.0.min.js", function(){

    console.log("From jQuery"); 

});

执行结果也就不一样,类似顺序加载:

复制代码 代码如下:

undefined 

test.js: loaded 

From test.js 

js/jquery-1.11.0.min.js: loaded 

From jQuery

希望本文所述对大家的javascript程序设计有所帮助。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:不使用ajax实现无刷新提交表单
下一篇:java简单网页抓取的实现方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~