IE无法使用动态加载脚本中的JS类问题求助

问题描述 #

我尝试用jQuery的$.getScript动态加载脚本并实例化其中的BasicMask类，代码如下：

$("#Volumenberechnung").click(function(){ 
    if($(".highlight").length){ 
        var markierteElemente=$( ".highlight" ).toArray(); 
        var mask; 
        //zuerst das Script der BasisMaske anfragen 
        var filename="globalMask.js"; 
        var dirname="/static/scripts/maskenScripte/" 
        var uri="/getScript/"+filename+dirname; 
        $.getScript(uri).done(function(script, text){ 
            mask=new BasicMask(450,700,300,600,xmlKontext); 
            mask.setAdditionalMetadata(markierteElemente); 
            $.post("/getMask/sendungVolumenberechnung.html").done(function(doc){ 
                mask.fillWithHTML(doc); 
            }); 
        }); 
    }else{ 
        alert("Es wurde kein Element ausgewählt!"); 
    } 
}); 

通过IE调试器确认脚本已成功加载，但IE11始终提示BasicMask是未知类型，Firefox和Chrome则完全正常。另外，我用Flask做开发服务器，另一处使用$.getScript但不实例化对象的场景运行没问题。

解决方案 #

针对IE11的兼容性特性，这几个方法应该能解决你的问题：

1. 强制将BasicMask暴露到全局作用域

IE11对动态加载脚本的局部作用域处理非常严格，如果globalMask.js里的BasicMask是普通函数或ES6类，默认可能不会挂载到全局。你可以在脚本末尾手动把它绑定到window对象：

// 在globalMask.js的最后添加这行
window.BasicMask = BasicMask;

这样在$.getScript的回调里就能直接访问到全局的BasicMask了。

2. 给脚本URL添加防缓存参数

IE11的缓存机制经常会搞事情——可能你加载的是旧版本的脚本（里面还没定义BasicMask）。给URL加个时间戳参数，强制浏览器拉取最新版本：

var filename="globalMask.js";
var dirname="/static/scripts/maskenScripte/";
// 添加时间戳参数
var timestamp = new Date().getTime();
var uri="/getScript/"+filename+dirname+"?t="+timestamp;
$.getScript(uri).done(function(script, text){
    // 你的原有代码
});

3. 改用原生动态脚本加载方式

有时候jQuery的$.getScript在IE11里的执行时机不如原生API可靠，试试用原生的脚本创建方法：

$("#Volumenberechnung").click(function(){
    if($(".highlight").length){
        var markierteElemente=$( ".highlight" ).toArray();
        var mask;
        var filename="globalMask.js";
        var dirname="/static/scripts/maskenScripte/";
        
        var script = document.createElement('script');
        script.src = "/getScript/"+filename+dirname;
        // 监听加载完成事件
        script.onload = function() {
            // 这里肯定能访问到BasicMask了
            mask=new BasicMask(450,700,300,600,xmlKontext);
            mask.setAdditionalMetadata(markierteElemente);
            $.post("/getMask/sendungVolumenberechnung.html").done(function(doc){
                mask.fillWithHTML(doc);
            });
        };
        // 处理加载失败的情况
        script.onerror = function() {
            alert("脚本加载失败，请检查路径！");
        };
        document.head.appendChild(script);
    }else{
        alert("Es wurde kein Element ausgewählt!");
    }
});

4. 检查是否有未转译的ES6语法

如果BasicMask是用ES6的class关键字定义的，IE11完全不支持原生ES6类，必须用Babel之类的工具把代码转译成ES5语法，否则即使脚本加载了，IE11也识别不了这个类。

内容的提问来源于stack exchange，提问作者schmetz Yannick