IE浏览器中动态创建script标签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("http://code.jquery.com/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; // www.111cn.net
    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 
http://code.jquery.com/jquery-1.11.0.min.js: loading 
test.js: complete 
From test.js 
http://code.jquery.com/jquery-1.11.0.min.js: loaded 
From jQuery

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

 代码如下 复制代码

loadJs("http://code.jquery.com/jquery-1.11.0.min.js", function(){
 
    console.log("From jQuery"); 
 
    loadJs("test.js", function(){
        console.log("From test.js");         
    });       
});

执行结果：

http://code.jquery.com/jquery-1.11.0.min.js: loading 
http://code.jquery.com/jquery-1.11.0.min.js: loaded 
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();
            }
        };
    } //www.111cn.Net
 
    document.write(script.outerHTML);
    //document.getElementsByTagName("head")[0].appendChild(script);
 
};
 
loadJs("http://code.jquery.com/jquery-1.11.0.min.js", function(){
    console.log("From jQuery"); 
});
 
loadJs("test.js", function(){
    console.log("From test.js");         
});

执行结果的顺序，也不相同：

 代码如下 复制代码

function
http://code.jquery.com/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("http://code.jquery.com/jquery-1.11.0.min.js", function(){
    console.log("From jQuery"); 
});

执行结果也就不一样，类似顺序加载：

 代码如下 复制代码

undefined 
test.js: loaded 
From test.js 
http://code.jquery.com/jquery-1.11.0.min.js: loaded 
From jQuery
时间： 2024-09-22 03:24:02

IE浏览器中动态创建script标签onload无效的相关文章

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

本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu

动态创建script标签实现跨域资源访问的方法介绍

 本篇文章主要是对动态创建script标签实现跨域资源访问的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 login.html  代码如下: <script>   function request(id,url){      oScript = document.getElementById(id);      var head = document.getElementsByTagName("head").item(0);      if (oScript

动态创建script标签实现跨域资源访问的方法介绍_javascript技巧

login.html 复制代码 代码如下: <script> function request(id,url){     oScript = document.getElementById(id);     var head = document.getElementsByTagName("head").item(0);     if (oScript) {        head.removeChild(oScript);     }     oScript = docu

动态创建script标签实现跨域资源访问的方法

login.html <script> function request(id,url){ oScript = document.getElementById(id); var head = document.getElementsByTagName("head").item(0); if (oScript) { head.removeChild(oScript); } oScript = document.createElement("script")

在JSP页面用JS以IMG的SRC为参数，动态创建IMG标签的问题，急急急！！！！！

问题描述 如题,我在JSP页面里面想通过JS建一个FUNCTION,以SRC为参数,动态创建IMG标签,可以实现么?然后函数是在<%%>里调用还是之外呢?我JS是小白...主要是JSP中要用,麻烦大神帮个忙,这是我写的代码,应该怎么该呢,求指教啊!<scripttype="text/javascript"> functionaddElementImg(srcc){ //添加img varimg=document.createElement("img&q

JS中动态创建元素的三种方法总结(推荐)_javascript技巧

1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

MFC中动态创建控件以及事件响应实现方法_C 语言

本文实例讲述了MFC中动态创建控件以及事件响应实现方法,分享给大家供大家参考.具体实现方法如下: 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个容器,一般是对话框,这时我们在对话框编辑窗口中,从工具窗口中拖出所需控件放在对话框中即可,再适当修改控件ID,设置控件属性,一个静态控件就创建好了,当对话框被显示时,其上的控件也会显示. 静态控件不需要调用Create()

在VB中动态创建数据库

在VB中动态创建数据库新建工程.添加控件 对应写上代码 以下为引用的内容:Private Sub Command2_Click()    Dim myDB As DAO.Database    'Set myDB = DAO.OpenDatabase("d:\mydb3.mdb")    Set myDB = DAO.OpenDatabase(App.Path + "/mydb.mdb")    Dim d As String    d = "delete

在存储过程中动态创建表

在尝试做在线考试系统的过程中,为了管理每个学生的考试信息,就考虑为每个学生创建以学号命名的临时数据表. 在存储过程中动态创建表如果不使用参数的话很好创建.方法如下: ALTER procedure [dbo].[ZXKS_GETSCORE] AS begin transaction --创建临时表,直接命名 create table temp_tablename ( id int primary key, da varchar(300), fs int ) declare @count int