Javascript 动态脚本加载 IE 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6568890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Dynamic Script Loading IE problems
提问by Marco
I'm trying to load dynamically script with this code:
我正在尝试使用以下代码动态加载脚本：
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);
I need to launch crtGridRicPrdo() function when the page starts, and in FireFox all works fine but in Internet Explorer I have a problems!
我需要在页面启动时启动 crtGridRicPrdo() 函数，在 FireFox 中一切正常，但在 Internet Explorer 中我遇到了问题！
回答by daveoncode
Internet explorer does not support "onload" on script tags, instead it offers the "onreadystatechange" (similarly to an xhr object). You can check its state in this way:
Internet Explorer 不支持脚本标签上的“onload”，而是提供“onreadystatechange”（类似于 xhr 对象）。您可以通过以下方式检查其状态：
script.onreadystatechange = function () {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
crtGridRicProd();
}
};
otherwise you can call crtGridRicProd()at the end of your js file
否则你可以在 js 文件的末尾调用crtGridRicProd()
EDIT
编辑
example:
例子：
test.js:
测试.js：
function test() {
alert("hello world");
};
index.html:
索引.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>
you will see the alert in both browser!
您将在两个浏览器中看到警报！
回答by czerasz
I use the following to load scripts one after another (async=false):
我使用以下内容一个接一个地加载脚本 ( 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);
}
Use it like this:
像这样使用它：
loadScript('url/to/the/first/script.js', function() {
loadScript('url/to/the/second/script.js', function() {
// after both scripts are loaded
});
});
One bugfix which the script includes is the latency bug for IE.
该脚本包含的一个错误修复是 IE 的延迟错误。
回答by Jayantha Lal Sirisena
You are loading script from external source. So you need to wait until it loads. You can call your function after id completed.
您正在从外部源加载脚本。所以你需要等到它加载。您可以在 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
}
回答by Reporter
When I red your code, I figured out that you try to append an onload event to the script tag.
当我红色你的代码时，我发现你试图将一个 onload 事件附加到脚本标签。
<html>
<head>
<script type="text/javascript" onLoad="crtGridRicPrdo()">
...
</script>
</head>
<body>
...
</body>
</html>
This will be the result of your javascript code. Why don't you add it to the body tag? This is the classic way and will defnatly work under IE too. This will also reduce your code:
这将是您的 javascript 代码的结果。为什么不把它添加到 body 标签中？这是经典的方式，也可以在 IE 下正常工作。这也将减少您的代码：
var bodyID = document.getElementsByTagName("body")[0];
bodyID.setAttribute("onload", "crtGridRicProd();");
回答by Leon Rom
For proberly dynamic loading a js-script (or css-file) in IE you must carefully check the path to the loaded file! The path should start from '/' or './'.
为了在 IE 中探测动态加载 js 脚本（或 css 文件），您必须仔细检查加载文件的路径！路径应该从“ /”或“ ./”开始。
Be aware, that IE sometimes loses leading slash - as for instance is described here: https://olgastattest.blogspot.com/2017/08/javascript-ie.html
请注意，IE 有时会丢失前导斜杠 - 例如此处所述：https: //olgastattest.blogspot.com/2017/08/javascript-ie.html
