2016-05-29 4 views
1

Я пытаюсь ввести jquery CDN с помощью javascript. Следующий код, похоже, не работает, давая мне ошибку: «$ не определен». Любая помощь будет оценена!jquery from google CDN не определен

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

У вас есть доступ к HTML? Это было бы лучшим решением. – 4castle

ответ

2

Scripts are being loaded asynchronously.

Слушайте onload событие script элемента как script не очень загружена, когда if-condition выполняется.

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!'); 
 
    } 
 
    } 
 
}

Обобщенная функция для загрузки скриптов асинхронно:

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

После загрузки jQuery вы, вероятно, предпочтете использовать ['$ .getScript()'] (https://api.jquery.com/jquery.getscript/) для загрузки другого скрипта. – 4castle

+0

@ 4castle, частично согласен с вами, хотя этот сниппет просто для демонстрации того, как все работает :) Спасибо .. – Rayon

+0

Спасибо за ваш ответ. Нужно ли писать jquery-коды внутри функции jqry.onload, чтобы убедиться, что загружен jquery? – sawa

0

Попробуйте это:

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>

ИЛИ

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>

Смежные вопросы