2

我尝试了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...')

在此处输入图像描述

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

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

在此处输入图像描述

4

3 回答 3

2

哦，我明白了。是我的错！https://stackoverflow.com/a/950146/151453提供的 loadScript()在 IE8 和 Firefox、Chrome 上完全可以使用。

而且，为了让它在 IE9+ 中工作，我必须遵循微软的建议： 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 上验证。

于 2013-04-17T02:46:33.737 回答
1

IE8 和更早版本处理script对象的方式略有不同——它们不公开onLoad事件，而是公开onReadyStateChange事件。您可以在https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.jsAsset.javascript上查看 Mootools 的功能，作为一个很好的示例。您主要是在寻找这部分：

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

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

于 2013-04-16T16:12:21.470 回答
0

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

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

        <script src="t1.js"></script>
        <!--[if IE 8]>
            <script src="t2.js"></script>
        <![endif]-->
    </body>
</html>
于 2013-04-16T16:09:47.190 回答