Question

我一直在使用javascript构建脚本标记。当我使用此脚本加载其他三个脚本时，脚本没有按顺序加载。我希望首先加载jquery.min.js。所以我用它作为第一个参数。但它最初并没有被加载。所以我已经陷入了参考错误。谁能告诉我在这段代码中我做了什么错误。我的代码在这里

<script type="text/javascript">
(function (a, b, c) {
    var g = document.createElement('script');
    g.type = 'text/javascript';
    g.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://') + a;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(g, s);
    var g = document.createElement('script');
    g.type = 'text/javascript';
    g.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + b;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(g, s);
    var g = document.createElement('script');
    g.type = 'text/javascript';
    g.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + c;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(g, s);

})('ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', '.example.com/js/script.js', '.example.com/js/form.js');
</script>

Answer 1

在我对这个问题的研究之后，我更新了以后访问这个问题的人。

对于Opera（12.16）以外的大多数浏览器（IE9，Firefox，Chrome，Safari等），动态脚本注入DOM将异步加载脚本。

所以这段代码：

function loadScript(src) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
}
loadScript('script1.js');
loadScript('script2.js');
loadScript('script3.js');

几乎相当于：

<script src="script1.js" async></script>
<script src="script2.js" async></script>
<script src="script3.js" async></script>

但如果async标志明确设置为false，则：

function loadScript(src) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    script.async = false;
}

然后脚本将按顺序加载。

所以这个问题的答案非常简短，就是g.async = false，但我仍然建议使用一些框架，这是最好的答案。

试试这个：http://jsfiddle.net/DRCzN/

~~~~原帖答案~~~~~~

动态脚本插入（createElement('script')然后insertBefore()甚至insertAfter()）将异步加载每个脚本。

因此，使用当前脚本，这些脚本到达浏览器的程度很大程度上取决于网络状态。

如果要保留这些脚本的依赖关系，可以使用一些脚本加载器，例如$script，head.js或Require.js。

编辑：我喜欢Jonathan的解决方案，使用$.getScript()进行了一些改进。

如果script.js和form.js彼此独立

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
(function(scripts) {
    var protocol = ('https:' == document.location.protocol ? 'https://ssl.' : 'http://www.');
    $.each(scripts, function(i, s) {
        $.getScript(protocol + s);
    });
})(['.example.com/js/script.js', '.example.com/js/form.js']);
</script>

如果在script.js上删除了form.js

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
(function(scripts) {
    var protocol = ('https:' == document.location.protocol ? 'https://ssl.' : 'http://www.');
    $.getScript(protocol + scripts[0], function() {
        $.getScript(protocol + scripts[1]);
    });
})(['.example.com/js/script.js', '.example.com/js/form.js']);
</script>

Answer 2

使用require.js进行动态脚本加载。它会工作。另外，尝试在网站上方使用jquery.js，而不是使用脚本生成。

Answer 3

它很接近，但是使用insertAfter，并记住增加每个脚本的索引。

var s = document.getElementsByTagName('script')[0];
g.parentNode.insertBefore(s, g.nextSibling);

...
var s = document.getElementsByTagName('script')[1];
g.parentNode.insertBefore(s, g.nextSibling);

...
var s = document.getElementsByTagName('script')[2];
g.parentNode.insertBefore(s, g.nextSibling);

Answer 4

这是另一个例子。这个脚本使用一组脚本来添加，反转它们，然后在当前脚本标记之后插入。

编辑：您可以直接加载jQuery，如下所示。使用// a开始将使资源在当前协议下加载。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
(function (scripts) {

    var protocol = ('https:' == document.location.protocol ? 'https://ssl.' : 'http://www.'),
        thisScript = document.getElementsByTagName('script')[0];

    function createScriptTag(element, index, array) {
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = protocol + element;
        thisScript.parentNode.insertBefore(newScript, thisScript.nextSibling);
    };

    (scripts || []).reverse().forEach(createScriptTag);

})(['example.com/js/script.js', 'example.com/js/form.js']);
</script>

Answer 5

以下是解决此问题的另一种方法：

<script type="text/javascript">
window.onload = function () {
    "use strict";
    function js(n) {
        var s = document.createElement('script');
        s.setAttribute("type", "text/javascript");
        s.setAttribute("src", n);
        document.getElementsByTagName("head")[0].appendChild(s);
    }
    js("http://requirejs.org/docs/release/2.1.8/minified/require.js");
    js("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
    js("http://www.example.com/form.js");
    js("http://www.example.com/script.js");
};
</script>

也可以使用它而不是解释的代码。

脚本没有按顺序加载

5 个答案:

如果script.js和form.js彼此独立

如果在script.js上删除了form.js