Dynamisch geladen JS nicht verfügbar, bis die Funktion beendet ist

Question

Ich habe eine Funktion, die jQuery mit einer Ladefunktion lädt. Nachdem ich jQuery geladen habe, versuche ich in den nächsten Zeilen jQuery-Funktionen aufzurufen, aber sie funktionieren nicht. Wenn ich die Funktion neu lade funktioniert es. Ich habe versucht, setTimeOut, Callback-Funktion, und das erneute Laden der gleichen Funktion zweimal in meiner aufrufenden Funktion, aber kann jQuery nicht zum ersten Mal gelesen werden.

Ich arbeite auf einer Plattform (iNotes), die mir nicht erlaubt, direkt auf die Kopfzeile, Körper usw. zugreifen. Ich muss es programmgesteuert tun. Ich habe keinen Zugriff auf Onload, noch die .js-Dateien hinzufügen, außer durch Javascript.

Ich möchte jQuery (und jQuery-Ui) über die Funktion laden, und dann sofort die jQuery-Methoden verwenden.

alertTwo() wird von einem Menüelement aus aufgerufen.

function alertTwo(){ 
    window.setTimeout(function(){ 
     chk4_jQuery(); 
     iPage(); 
    },0); 
} 

function chk4_jQuery() { 
    if (typeof jQuery == 'undefined' ) { 
     loadJQ(function(){console.log('finallydone')}); 
    }else{ 
     // alert('Found jQuery'); 
    } 
} 

function loadJQ(finalCallback) { 
    function load1() { 
     loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ', function(){ 
      console.log('jQuery loaded'); 
      load2(); 
     }, 'script'); 
    } 
    function load2() { 
     loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', function(){ 
      console.log('Jquery UI loaded'); 
      load3(); 
     },'script'); 
    } 
    function load3() { 
     loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css',function(){ 
      console.log('css loaded'); 
      finalCallback(); 
     },'stylesheet'); 
    } 
    load1(); 
} 

function iPage(){ 
    var page = location.protocol.concat("//").concat(window.location.hostname) + "/testPage.html"; 
    var $dialog = $('<div></div>') 
       .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>') 
       .dialog({ 
        autoOpen: false, 
        modal: true, 
        height: 625, 
        width: 500, 
        title: "Some title" 
       }); 
    $dialog.dialog('open'); 
    } 

In Chrome Registerkarte Quellen von Werkzeugen Entwickler, ich die Haltepunkte an diesen Funktionen zu sehen, und ich sehe es gehen, um den jQuery-Libs zu laden, dann wird es auf die iPage() Funktion und Fehler aus bei

var $dialog = $('<div></div>') 

Wenn ich die Funktion erneut ausführen, erkennt es die jQuery Variablen und läuft.

Wer weiß, wie ich es beim ersten Versuch zur Arbeit bekommen kann?

Answer 1

Rufen Sie iPage als Rückruf auf.

function alertTwo() { 
 
    chk4_jQuery(); //Invoke `chk4_jQuery` function 
 
} 
 

 
function chk4_jQuery() { 
 
    loadJQ(iPage); //Invoke `loadJQ` function and pass `iPage` function as argument 
 
} 
 
} 
 

 
function loadJQ(finalCallback) { // `finalCallback` is nothing but `iPage` 
 
    function load1() { 
 
    loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ', function() { 
 
     console.log('jQuery loaded'); 
 
     load2(); 
 
    }, 'script'); 
 
    } 
 

 
    function load2() { 
 
    loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', function() { 
 
     console.log('Jquery UI loaded'); 
 
     load3(); 
 
    }, 'script'); 
 
    } 
 

 
    function load3() { 
 
    loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', function() { 
 
     console.log('css loaded'); 
 
     finalCallback(); //`iPage` is invoked when all other scripts are loaded 
 
    }, 'stylesheet'); 
 
    } 
 
    load1(); 
 
} 
 

 
function iPage() { 
 
    var page = location.protocol.concat("//").concat(window.location.hostname) + "/testPage.html"; 
 
    var $dialog = $('<div></div>') 
 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>') 
 
    .dialog({ 
 
     autoOpen: false, 
 
     modal: true, 
 
     height: 625, 
 
     width: 500, 
 
     title: "Some title" 
 
    }); 
 
    $dialog.dialog('open'); 
 
}