Question

我正在一个我没有服务器端访问的平台上工作。这意味着我无法将javascript文件直接加载到头部，只能加载到正文中。

以下是我正在做的事情：

function loadjscssfile(filename, filetype){
//http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

loadjscssfile('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js');
loadjscssfile('http://redacted.com/data.php?rand='+Math.random(),'js');
loadjscssfile('https://raw.github.com/aakilfernandes/jquery.inject/master/jquery.inject.js?rand='+Math.random(),'js');

然而，我加载的第三个javascript文件（jQuery插件）需要jQuery。

当我加载页面时，我收到此错误（在Chrome中）

Uncaught ReferenceError: jQuery is not defined

我倾向于我的插件在jQuery之前加载。因为如果我刷新页面（当缓存jQuery时）错误消失。但是，即使没有缓存jQuery，我也需要这个工作。想法？

Answer 1

这不是一个优雅的解决方案，但它始终适用于我：将jquery.min.js文件的内容直接复制/粘贴到您的html页面

    <script> ... </script>

Answer 2

我做的是这个

if (typeof $ === 'undefined') {
    document.write("<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'><\/script>");
    var timeout = 0;
    while (typeof $ === 'undefined' && timeout++ < 100);
}

这将等到jquery加载之后才开始执行其他操作。然后加载你的插件。

Answer 3

正如您尝试的那样，您必须加载jQuery并在加载后运行其他脚本。要做到这一点，您可以使用加载程序库，如yepnope或headjs，记住，因为您不能将脚本放在头上，您必须将加载程序代码放在脚本中。

您的代码将是这样的：

yepnope( // or head.js
    'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
    'http://redacted.com/data.php?rand='+Math.random(),
    'https://raw.github.com/aakilfernandes/jquery.inject/master/jquery.inject.js?rand='+Math.random()
);

你可以做的另一件事就是将jquery脚本放在主体上并在其后加载其他脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $.getScript('http://redacted.com/data.php?rand='+Math.random());
    $.getScript('https://raw.github.com/aakilfernandes/jquery.inject/master/jquery.inject.js?rand='+Math.random());
</script>

在jQuery之前加载jQuery插件

3 个答案: