通过javascript加载jQuery并从另一个文件运行函数

Question

我需要在页面中加载3个jquery脚本。 出于业务原因，我必须进行尽可能小的修改，因此我决定创建一个要包含在网站中的JavaScript。

之后，此脚本必须加载jQuery以及3个CSS文件之外的其他3个jquery脚本。

基本上，到现在为止，这就是我所拥有的：

var jquery = document.createElement('script');
jquery.type = "text/javascript";
jquery.src = "common/com/jquery/jquery-1.9.1.js";
document.getElementsByTagName('head')[0].appendChild(jquery,document.getElementsByTagName('head')[0].firstChild);

var prettyPhoto = document.createElement('script');
prettyPhoto.type = "text/javascript";
prettyPhoto.src = "common/com/prettyPhoto/jquery.prettyPhoto.js";
document.getElementsByTagName('head')[0].appendChild(prettyPhoto,document.getElementsByTagName('head')[0].firstChild);

var jqueryui = document.createElement('script');
jqueryui.type = "text/javascript";
jqueryui.src = "common/com/jqueryui/jquery-ui.js";
document.getElementsByTagName('head')[0].appendChild(jqueryui,document.getElementsByTagName('head')[0].firstChild);

var kohlerApp = document.createElement('script');
kohlerApp.type = "text/javascript";
kohlerApp.src = "common/js/lelak.js";
document.getElementsByTagName('head')[0].appendChild(kohlerApp,document.getElementsByTagName('head')[0].firstChild);

var style = document.createElement("link");
style.type = "text/css";
style.href = "common/css/style.css";
style.rel = "stylesheet";
document.getElementsByTagName('head')[0].appendChild(style,document.getElementsByTagName('head')[0].firstChild);

var jqueryui = document.createElement("link");
jqueryui.type = "text/css";
jqueryui.href = "common/css/jquery-ui.css";
jqueryui.rel = "stylesheet";
document.getElementsByTagName('head')[0].appendChild(jqueryui,document.getElementsByTagName('head')[0].firstChild);

var prettyPhoto = document.createElement("link");
prettyPhoto.type = "text/css";
prettyPhoto.href = "common/css/prettyPhoto.css";
prettyPhoto.rel = "stylesheet";
document.getElementsByTagName('head')[0].appendChild(prettyPhoto,document.getElementsByTagName('head')[0].firstChild);

lelakApp.giveError("0","test");

我正在尝试执行包含的脚本之一中包含的jquery函数之一，但没有成功。 返回以下错误：

Uncaught ReferenceError: lelakApp is not defined 

（其中lelakApp来自我的脚本）

我如何才能同时加载jQuery和个人Jquery脚本并从该个人脚本中加载功能？

---

编辑

我正在尝试使用requireJs执行一个简单的jquery请求

define(["../com/jquery/jquery-1.9.1"], function($) {
$('body').html('');
});

但我收到此错误：

Uncaught TypeError: undefined is not a function

Answer 1

我认为这是因为您在尝试使用该功能时不知道脚本是否已加载。

您可以尝试将onload事件处理程序添加到脚本标签，并且仅在脚本全部加载后才开始使用脚本。

看一看require.js可以使用还是参考一下： http ://requirejs.org/

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Answer 2

在使用lelakApp之前，您应该等待脚本完全加载。 我建议您使用require.js动态加载脚本。

为了在没有require.js的情况下执行此操作 ，可以执行以下操作：

script.onload = script.onreadystatechange = function () {
    'use strict';

    if (script.readyState === 'complete') {
        // ...
    }
}

注意：我对浏览器兼容性没有任何想法。