0

我一直在使用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>
4

5 回答 5

2

在我研究了这个主题之后，我更新了谁访问了这个问题。

对于除 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')theninsertBefore()或 even 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>

如果 form.js 依赖于 script.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>
于 2013-08-21T06:44:49.317 回答
2

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

于 2013-08-21T09:03:27.593 回答
0

很接近了，但是使用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);
于 2013-08-21T06:21:10.887 回答
0

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

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

<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>
于 2013-08-21T06:34:14.417 回答
0

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

<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>

这也可以用来代替所解释的代码。

于 2013-08-22T10:03:21.873 回答