2016-05-29 5 views
1

Ich versuche, jQuery CDN durch Javascript zu injizieren. Der folgende Code scheint jedoch nicht zu funktionieren und gibt mir einen Fehler: "$ ist nicht definiert". Jede Hilfe wird geschätzt!jquery von Google CDN ist nicht definiert

var jqry = document.createElement('script') 
jqry.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js') 
jqry.setAttribute('type', 'text/javascript') 
var jqui = document.createElement('script') 
jqui.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js') 
jqui.setAttribute('type', 'text/javascript') 
document.head.appendChild(jqry) 
document.head.appendChild(jqui) 

if (typeof jQuery == 'undefined') { 
    alert('no jquery') 
} 

$... // codes using jquery 
+0

Haben Sie Zugriff auf den HTML haben? Das wäre eine bessere Lösung. – 4castle

Antwort

2

Scripts are being loaded asynchronously.

Anhören onload Ereignis des script Element als script nicht wirklich wird geladen, wenn if-condition ausgeführt wird.

var jqry = document.createElement('script') 
 
jqry.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js') 
 
jqry.setAttribute('type', 'text/javascript'); 
 
document.head.appendChild(jqry) 
 

 
jqry.onload = function() { 
 
    if (typeof jQuery == 'undefined') { 
 
    alert('no jquery') 
 
    } else { 
 
    alert('Loaded!'); 
 
    var jqui = document.createElement('script'); 
 
    jqui.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js') 
 
    jqui.setAttribute('type', 'text/javascript'); 
 
    document.head.appendChild(jqui); 
 
    jqui.onload = function() { 
 
     alert('jquery-ui Loaded!'); 
 
    } 
 
    } 
 
}

Eine verallgemeinerte Funktion Skripte asynchron zu laden:

function loadScript(src, callback) { 
 
    var script = document.createElement('script'); 
 
    script.type = 'text/javascript'; 
 
    script.src = src; 
 
    document.head.appendChild(script); 
 
    script.onload = callback || function() {}; 
 
} 
 
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js', function() { 
 
    alert('jQuery Loaded!'); 
 
    loadScript('//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js') 
 
})

+0

Sobald jQuery geladen ist, würden Sie wahrscheinlich lieber ['$ .getScript()'] (https://api.jquery.com/jquery.getscript/) zum Laden des anderen Skripts verwenden. – 4castle

+0

@ 4castle, stimme teilweise mit Ihnen überein, obwohl dieser Ausschnitt nur um zu zeigen, wie die Dinge funktionieren :) Danke .. – Rayon

+0

Danke für Ihre Antwort. Muss ich in der Funktion jqry.onload Jquery-Codes schreiben, um sicherzustellen, dass die Jquery geladen ist? – sawa

0

starten:

var fileref=document.createElement('script'); 
 
fileref.setAttribute("type","text/javascript"); 
 
fileref.setAttribute("src","https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"); 
 
document.getElementsByTagName("head")[0].appendChild(fileref);
<head></head>

ODER

var script = document.createElement("script"); 
 
script.type = "text/javascript"; 
 
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"; 
 
document.head.appendChild(script);
<head></head>