Question

我尝试了https://stackoverflow.com/a/950146/151453提供的代码，并且我成功验证了我可以从t2.js加载t1.js。但是，t2.js完成加载回调仅适用于Chrome（v26），Firefox（v17）和IE10，但不适用于Microsoft IE8（Windows 7）。

IE8的症状是：永远不会调用回调start_deco()。

如何在IE8中获得相同的结果？谢谢。

====以下代码====

t1.html：

<html>
<head></head>

<body>
Hello!

<script src="t1.js"></script>

</body>
</html>

t1.js：

// loadScript function provided by https://stackoverflow.com/a/950146/151453
function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // then bind the event to the callback function 
    // there are several events for cross browser compatibility
    //script.onreadystatechange = callback;  // chj: !!!
    script.onload = callback;

    // fire the loading
    head.appendChild(script);
}

function start_deco()
{
    alert('Done t2.js.');
    loadScript('t3.js.');
}

loadScript('t2.js', start_deco) // wish to load jquery.js etc

t2.js：

console.log('Loading t2.js...')

t3.js：

console.log('Loading t3.js...')

enter image description here

============== UPDATE1 =================

在IE8上，如果我在script.onreadystatechange = callback;中启用loadScript()，则会弹出警告框，但是，调用loadScript('t3.js.');会失败并在该行上显示“未实现错误”，以便t3。 js无法加载。图片如下：

enter image description here

Answer 1

哦，我明白了。这都怪我！ https://stackoverflow.com/a/950146/151453提供的loadScript（）在IE8和Firefox，Chrome上完全可行。

并且，为了使其在IE9 +中工作，我必须遵循Microsoft的建议：http://msdn.microsoft.com/en-us/library/ie/hh180173(v=vs.85).aspx。

评论script.onreadystatechange = callback;声明是我的错。

我的IE8控制台上显示的“未实现”错误是由于在调用callback时缺少loadScript('t3.js.');参数。

所以，要解决这个问题，我应该在loadScript（）中添加一行，最终结果是：

function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    if(!callback) callback = function(){}; // ★★★★★★★★★ JUST ADD THIS LINE!

    // bind the event to the callback function 
    if(script.addEventListener) {
      script.addEventListener("load", callback, false); // IE9+, Chrome, Firefox
    } 
    else if(script.readyState) {
      script.onreadystatechange = callback; // IE8
    }

    // fire the loading
    head.appendChild(script);
}

在IE8，IE9，Firefox 17，Chrome 27上验证。

Answer 2

IE8及更早版本处理script对象的方式略有不同 - 它们不会公开onLoad事件而是公开onReadyStateChange事件。您可以在https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js查看Mootools的Asset.javascript函数，以获得一个很好的例子。你主要是在寻找这个部分：

if (!script.addEventListener){
  script.addEvent('readystatechange', function(){
    if (['loaded', 'complete'].contains(this.readyState)) load.call(this);
  });
} else {
  script.addEvent('load', load);
}

当然应该注意这样的情况是总是使用像Mootools或jQuery这样的库的主要原因之一，以完全避免这样的问题。

Answer 3

我知道这不是来自js，但这是一个选择吗？

<html>
    <head></head>
    <body>
        Hello!

        <script src="t1.js"></script>
        <!--[if IE 8]>
            <script src="t2.js"></script>
        <![endif]-->
    </body>
</html>

如何使用IE8从js中包含js

3 个答案: