7

我有一个通过插入单个脚本标签包含在页面中的 javascript 小部件（因为应用程序应该易于分发）：

<script type="text/javascript" src="loadMyWidget.js"></script>

loadMyWidget.js 然后需要加载多个脚本文件，这些文件必须以一定的顺序运行。我尝试通过将脚本元素插入 DOM 来异步加载它们，但这并不能让我控制序列。

我也尝试使用对现代浏览器非常有用的 head.js，但我无法让它在 IE7 和 8 中工作。

不幸的是，将脚本压缩到一个文件中很困难，因为它由来自不同项目的许多文件组成，我不知道何时更新脚本。

看起来很简单，我需要以一定的顺序从 javascript 代码中加载 javascript 文件，并让它在所有浏览器中工作，包括 IE7 和 8。

4

5 回答 5

6

如果您正在使用 jQuery.getScript() ，则可以将其用作 $.when() 来推迟执行，直到事情停止加载。

如果通过“顺序执行”表示您需要在执行之前加载必要条件，则以下内容将起作用

$(function(){
   $.when(
      $.getScript("/script1"),
      $.getScript("/scirpt2"),
      $.getScript("/script3")
}).done(function(){
    // do stuff with the contents of my new script files
});

如果通过顺序执行意味着您需要一个接一个地执行文件，请尝试以下操作：

$.Deferred()
.then(function () { return $.getScript("/script1"); })
.then(function () { return $.getScript("/scirpt2"); })
.then(function () { return $.getScript("/script3"); })
.resolve();

当然，这需要 jQuery，在您编辑之后，这可能不适合您。

推荐阅读

于 2012-05-31T13:28:10.130 回答
5

如果你需要 vanilla JS，这样的东西可以工作：

function loadScripts(scripts, complete) {
    var loadScript = function( src ) {
        var xmlhttp, next;
        if (window.XMLHttpRequest)  {
            xmlhttp = new XMLHttpRequest();
        } else {
            try {
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return;
            }
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                eval(xmlhttp.responseText);
                next = scripts.shift();
                if ( next ) {
                    loadScript(next);
                } else if ( typeof complete == 'function' ) {
                    complete();
                }
            }
        }
        xmlhttp.open("GET", src , true);
        xmlhttp.send();
    };

    loadScript( scripts.shift() );
}

loadScripts(['jquery.js','jquery.plugin.js'], function() {
    console.log('loaded');
});

在 Chrome 中测试，也应该在 IE 中工作。

于 2012-05-31T13:57:34.197 回答
3

我遇到了同样的问题并通过以下方式处理：

document.write('<script type="text/javascript" src="other1.js"></script>');
document.write('<script type="text/javascript" src="other2.js"></script>');

runSomeCode();

代码将同步加载和运行。优点：简单、轻便、跨浏览器兼容、无依赖。缺点：丑。

更多详情：https ://stackoverflow.com/a/3292763/235179

于 2012-05-31T14:05:40.107 回答
1

你试过 require.js 吗？http://requirejs.org/

于 2012-05-31T14:01:33.793 回答
1 
function loadScript(arrayOfUrlStrings, callback) {
  var numScripts = arrayOfUrlStrings.length;
  var count = 0;
  var headElement = document.getElementsByTagName('head')[0]

  function onLoad() {
    count += 1;

    if (count === numScripts) {
      callback();
    } else {
      addScript();
    }
  }

  function addScript() {
    var script = document.createElement('script');
    script.src = arrayOfUrlStrings[count];
    script.onload = onLoad;
    headElement.appendChild(script);
  }

  addScript();
}
于 2016-09-08T15:25:48.363 回答