通過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') {
        // ...
    }
}

注意：我對瀏覽器兼容性沒有任何想法。