javascript - 带有 IE(用于延迟加载)问题的脚本 onload/onerror

Question

我正在重建我的惰性加载器模块以接受异步请求，但我有一个大问题:
Internet Explorer 不支持 script.onload/onerror!!!

旧脚本确实全局评估了使用 ajax 同步调用读取的目标脚本源，它工作得很好，它是跨浏览器的，我可以让它异步编辑 1 个变量，但调试起来非常棘手(所有源代码都在一行中执行，浏览器没有提供太多关于错误的信息，将代码除以带有正则表达式的行是不可能的，因为 js 具有无限深度的 block ，而正则表达式根本不擅长这个)。

这是我用来创建脚本的代码(经典):

var script = document.createElement('script');
script.type = 'text/javascript';
script.src =name;
script.name =name;
script.async = true;
script.onload=<my_onload_code>;
script.onerror=<my_onerror_code>;

它不能在 IE 上运行，因为它不支持脚本的 onload 和 onerror；
下面的代码是一个修复程序，但仅当脚本不是异步时才有效

if(script.onreadystatechange!==undefined)//only IE T_T
            script.onreadystatechange = function() {
                    if (script.readyState == 'loaded')//ERROR LOADING
                        <my_onerror_code>;
                    else
                    if(script.readyState == 'complete')//loaded
                        <my_onload_code>;

            };

我可以每隔 X 毫秒测试一次，直到加载脚本，但这是一个丑陋的解决方案，我想避免它。

编辑: 这是我尝试在加载脚本时每隔 X 毫秒检查一次的代码，它还不错，而且比 ajax 效果更好；问题是我不知道是否脚本加载成功或错误(onload 或 onerror)。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src =name;
script.name =name;
script.async = true;

    script.onload=function(){Lazy_loader.onload(this);};
    script.onerror=function(){Lazy_loader.onerror(this);};

    if(script.onreadystatechange!==undefined){//ie fix T_T 
        script.timer=setInterval(function(){
                    if (script.readyState == 'loaded' || script.readyState == 'complete')}//ERROR LOADING

                        if(LOADED???)//loaded
                            Lazy_loader.onload(script);
                        else
                            Lazy_loader.onerror(script);

                        clearInterval(script.timer);
                    }

                    },100);

    }

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

我尝试使用 addEventListener/attachEvent 函数，但它似乎不起作用(即使使用来自网络的 addEvent 函数)

总结选项似乎是:

• 使用 AJAX 和全局 eval 加载脚本(调试 hell )
• 仅在 IE 中使用 AJAX 和全局评估(可能是一种解决方案，我不使用 IE)
• 仅当脚本包含错误时才使用 AJAX 和全局评估(我需要检查计时问题，因为即使调用是异步的，我的代码也会“模拟”同步代码)
• 每 X 次测试 script.onreadystatechange(仅在 IE 上)，直到它被加载(丑陋!!!)
• 使用 window.onload :避免，它需要对所有页面收费，我需要在只有一个脚本启动时调用它(详情见尾页)
• 在每个脚本的源代码上添加代码(避免像尾页所说的那样)
• 修复 IE 的 script.onload(使用 addEventListener/attachEvent？!？)

---

请注意:
我不想使用 window.onload 因为它只在加载所有页面时触发，我需要在只加载目标脚本时触发它(我的延迟加载脚本要复杂得多所以请不要问为什么);
我不想使用任何第三方库(如 jquery、prototype 等),
我什至不想编辑目标脚本源(比如在使用 JSPON 或添加脚本以提醒脚本已加载时)。

希望这不是太多!谢谢。

Answer 1

这是一个解决方案:如果是 IE，我将简单地使用异步 ajax 调用加载文本，然后将 script.text 设置为加载的数据。IE 似乎锁定了 onload 和 onerror(出于安全原因？)而不是 script.text(一些其他浏览器可能不允许它用于安全原因以防止像 iframe 上的 XSS 攻击)，我不知道为什么微软不能简单地尊重标准，我只是讨厌 ie 和“技巧”来解决他们的设计问题。

    var script = document.createElement('script');
    script.type = 'text/javascript';      
    //---start IE fix--- 
    if(window.ActiveXObject){//ie fix T_T 
            var xmlhttp=null;
            try {
                xmlhttp = new XMLHttpRequest();
            }catch(e){
                try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }  
            xmlhttp.onreadystatechange  = function() {
            try{
                if(this.done!==undefined)
                    return;

                if(this.status >= 200 && this.status < 300){//loaded
                    this.done=true;
                    script.text=this.responseText;
                    document.getElementsByTagName('head')[0].appendChild(script);
                    Lazy_loader.onload({name:name});
                }
                if(this.status >= 400){
                    this.done=true;
                    Lazy_loader.onerror({name:name});
                    }
                }catch(e){}
            };
            xmlhttp.open('get',name,true);                             
            xmlhttp.send(null); 

        }
        else{//browser that support script.onload/onerror
            script.src =name;
            script.name =name;
            script.async = true;  
            script.onload=function(){Lazy_loader.onload(this);};
            script.onerror=function(){Lazy_loader.onerror(this);};
            document.getElementsByTagName('head')[0].appendChild(script); 
        }
        //---end IE fix---

这在大多数浏览器上运行良好(IE/chrome/firfox 目前已测试)并且我测试了加载 3 个文件:

• file1 加载时间为 4 秒
• file2 出现 500 错误
• 加载时间为 1s 的文件 3

并且它们在所有浏览器中总共加载了 40XX 毫秒(浏览器需要一些额外的时间来调用 onload/onerror 脚本)，我还可以(使用我的延迟加载器脚本)模拟同步加载执行仅在加载队列中的所有文件后才编写代码。

如果您知道更好的方法或您知道此实现中可能出现的错误，请回复!谢谢!