Question

我正在尝试使用以下代码加载动态脚本：

var headID = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); 
script.type='text/javascript'; 
script.src="js/ordini/ImmOrd.js"; 
script.setAttribute("onload", "crtGridRicProd();");                       
headID.appendChild(script);

我需要在页面启动时启动crtGridRicPrdo（）函数，而在FireFox中一切正常但在Internet Explorer中我遇到了问题！

Answer 1

Internet Explorer在脚本标记上不支持“onload”，而是提供“onreadystatechange”（类似于xhr对象）。你可以用这种方式检查它的状态：

script.onreadystatechange = function () {
   if (this.readyState == 'complete' || this.readyState == 'loaded') {
     crtGridRicProd();
   }
};

否则你可以在你的js文件末尾调用 crtGridRicProd（）

修改

示例：

test.js：

function test() { alert("hello world"); };

的index.html：

<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <script> var head = document.getElementsByTagName("head")[0] || document.body; var script = document.createElement("script"); script.src = "test.js"; script.onreadystatechange = function () { if (this.readyState == 'complete' || this.readyState == 'loaded') { test(); } }; script.onload = function() { test(); }; head.appendChild(script); </script> </body>

您将在两个浏览器中看到警报！

Answer 2

我使用以下内容逐个加载脚本（async=false）：

var loadScript = function(scriptUrl, afterCallback) {
            var firstScriptElement = document.getElementsByTagName('script')[0]; 
    var scriptElement = document.createElement('script');
            scriptElement.type = 'text/javascript';
            scriptElement.async = false;
            scriptElement.src = scriptUrl;

    var ieLoadBugFix = function (scriptElement, callback) {
        if ( scriptElement.readyState == 'loaded' || scriptElement.readyState == 'complete' ) {
            callback();
        } else {
            setTimeout(function() { ieLoadBugFix(scriptElement, callback); }, 100);
        }
    }

    if ( typeof afterCallback === "function" ) {
        if ( typeof scriptElement.addEventListener !== "undefined" ) {
            scriptElement.addEventListener("load", afterCallback, false)
        } else {
            scriptElement.onreadystatechange = function(){
                scriptElement.onreadystatechange = null;
                ieLoadBugFix(scriptElement, afterCallback);
            }
        }
    }
    firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
}

像这样使用：

loadScript('url/to/the/first/script.js', function() {
    loadScript('url/to/the/second/script.js', function() {
    // after both scripts are loaded
    });
});

脚本包含的一个错误修正是IE的延迟错误。

Answer 3

您正在从外部源加载脚本。所以你需要等到它加载。您可以在ID完成后调用您的函数。

var headID = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); script.type='text/javascript'; 
script.onload=scriptLoaded;
script.src="js/ordini/ImmOrd.js"; script.setAttribute("onload", "crtGridRicProd();");
headID.appendChild(script);

function scriptLoaded(){
// do your work here
}

Answer 4

当我更改代码时，我发现你试图将一个onload事件附加到脚本标记。

<html>
 <head>
  <script type="text/javascript" onLoad="crtGridRicPrdo()">
   ...
  </script>
 </head>
 <body>
  ...
 </body>
</html>

这将是您的JavaScript代码的结果。为什么不将它添加到body标签？这是经典的方式，也将在IE下工作。这也会减少您的代码：

var bodyID = document.getElementsByTagName("body")[0];
bodyID.setAttribute("onload", "crtGridRicProd();");

Answer 5

为了在IE中编译动态加载js脚本（或css文件），你必须仔细检查加载文件的路径！路径应从＆＃39; / ＆＃39;或＆＃39; ./ ＆＃39;。

请注意，IE有时会丢失前导斜杠 - 例如： https://olgastattest.blogspot.com/2017/08/javascript-ie.html

Javascript动态脚本加载IE问题

5 个答案: