jQuery in einer Javascript (js) -Datei geladen

Question

Dies ist ein sehr einfaches Skript, das jQuery laden sollte. Ich kann in dem Firebug-Scripts Registerkarte sehen, die Jquery geladen wird, aber ich ‚ist $ nicht definiert“ Fehler, wenn ich versuche, es zu benutzen. Kann mir jemand helfen, zu verstehen, was falsch ist?

//function to add scripts 
function include(file) 
{ 
    var script = document.createElement('script'); 
    script.src = file; 
    script.type = 'text/javascript'; 
    script.defer = true;  
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 
//add jQuery 
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 

//See if jQuery is working 
$(document).ready(function() { 
    $('#internal').show(); 
}) 

//////////// 
//RETURNS: "$ is not defined $(document).ready(function() {" 

Das Seltsame ist, wenn don ‚t versuchen jQuery in demselben Skript zu verwenden, anstatt ich eine andere js Datei laden, die jQuery verwendet es

//function to add scripts 
function include(file) 
{ 
    var script = document.createElement('script'); 
    script.src = file; 
    script.type = 'text/javascript'; 
    script.defer = true;  
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 
//add jQuery 
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 

//add my custom script that wants to use jQuery 
include('scripts/testScript.js') 

testScript.js

$(document).ready(function() { 
    $('#external').show(); 
}) 

ich einen Rat mit diesem schätzen funktioniert.

Answer 1

Ich vermute, dass der Browser das JavaScript nur in dem Script-Knoten ausführen wird, den Sie hinzugefügt haben, nachdem die aktuelle Datei fertig ist.

Der Browser wird Ihr aktuelles Skript in einem Thread ausführen. Wenn es an das Ende Ihres Skripts gelangt, führt es das nächste Skript im DOM aus. Es kann nicht aufhören, durch ein Skript zu laufen, um zum nächsten zu springen.

Sie möchten vielleicht Googles JavaScript loader ansehen. Die Funktionsweise ist, dass Sie eine externe js-Datei laden und einen Rückruf registrieren, der beim Laden dieser Datei ausgeführt wird.

Sie können dies mit einem Rückruf tun, da der Code innerhalb des Callbacks erst ausgeführt wird, nachdem der Browser die aktuelle Datei ausgeführt und auf die nächste Datei umgestellt hat. Was Sie können nicht tun, obwohl der Browser wechseln von einer js-Datei zu einem anderen im laufenden Betrieb (d. H. Wenn es zuerst den Inhalt der Datei ausführt).

Answer 2

Wenn Sie eine Skriptdatei dynamisch hinzufügen, wird die Datei nicht ausgeführt, bis der Rest Ihres Javascript ausgeführt wird. In diesem Beispiel wird eine jQuery-Quelle unter den jQuery-Code geschoben und gibt daher undefined zurück.

Der Grundcode Beispiel zwei funktioniert, weil Sie zwei Dateien dynamisch hinzugefügt haben und in der Reihenfolge, in der sie hinzugefügt wurden, nach unten verschoben werden, sodass die jQuery-Quelle ausgeführt wird und anschließend Ihr jQuery-Code ausgeführt wird.

Answer 3

Also, indem Sie jQuery mit Javascript laden, laden Sie die Datei asynchron. Ihr Code beginnt mit dem Laden von jQuery und anschließend mit dem Aufruf Ihres document.ready-Codes, der fehlschlägt, weil jQuery das Laden nicht beendet oder mit der Ausführung begonnen hat.

Wenn Sie zwei Includes verwenden, wird jede Datei geladen. Wenn die zweite Datei ausgeführt wird, wird die erste bereits ausgeführt, und deshalb funktioniert sie.

Sie müssen wirklich einen Rückruf einrichten, so dass sobald jQuery fertig geladen wird, wird es die dokumentbereiten Aufgaben tun sowie anderen Code ausführen, der jQuery benötigt.

Answer 4

Wie in den anderen Antworten erläutert, wird jQuery asynchron geladen. Wenn Sie also $ (document) .ready() aufrufen, ist jquery bereits geladen.Sie können dies vermeiden, indem Sie Ihren eigenen Code zu einem Event-Handler onload des script-Element hinzu:

function include(file){ 
    var script = document.createElement('script'); 
    script.src = file; 
    script.type = 'text/javascript'; 
    script.defer = true; 
    script.onload= function(){ 
     $(document).ready(function() { 
     //your code here 
     }) 
    } 
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 
//add jQuery 
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 

Schauen Sie hier für ein Beispiel: http://jsfiddle.net/CrReF/