Загрузите jQuery с Javascript и используйте jQuery
Я добавляю библиотеку JQuery в DOM, используя:
var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
Однако, когда я бегу:
jQuery(document).ready(function(){...
Консоль сообщает об ошибке:
Uncaught ReferenceError: jQuery is not defined
Как динамически загружать jQuery, а также использовать его, когда он находится в DOM?
9 ответов
Здесь есть работающий JSFiddle с небольшим примером, который демонстрирует именно то, что вы ищете (если я не понял ваш запрос): http://jsfiddle.net/9N7Z2/188/
Есть несколько проблем с этим методом динамической загрузки JavaScript. Когда дело доходит до самых базовых фреймворков, таких как jQuery, на самом деле вы, вероятно, захотите загрузить их статически, потому что в противном случае вам пришлось бы писать целую фреймворк загрузки JavaScript...
Вы можете использовать некоторые из существующих загрузчиков JavaScript или написать свой собственный, наблюдая за window.jQuery быть определенным.
// Immediately-invoked function expression
(function() {
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function() {
var $ = window.jQuery;
// Use $ here...
};
document.getElementsByTagName("head")[0].appendChild(script);
})();
Просто помните, что если вам нужно поддерживать действительно старые браузеры, такие как IE8, load обработчики событий не выполняются. В этом случае вам нужно будет опросить наличие window.jQuery используя повторный window.setTimeout, Здесь есть работающий JSFiddle с этим методом: http://jsfiddle.net/9N7Z2/3/
Есть много людей, которые уже сделали то, что вам нужно сделать. Ознакомьтесь с некоторыми из существующих платформ JavaScript Loader, например:
Существует другой способ динамической загрузки jQuery ( исходный код). Вы также можете использовать
document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');
Это считается плохой практикой document.write, но для завершения хорошо упомянуть об этом.
См. Почему document.write считается "плохой практикой"? по причинам. Профи это document.write блокирует вашу страницу от загрузки других ресурсов, поэтому нет необходимости создавать функцию обратного вызова.
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.7.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
Но даже он признает, что это не сравнится с выполнением следующих действий, когда речь идет об оптимальной производительности:
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
<script type="text/javascript" src="scripts.js"></scripts>
</body>
</html>
Вам нужно запустить свой код ПОСЛЕ завершения загрузки jQuery
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = function(){
// your jQuery code here
}
или если вы запускаете его в асинхронной функции, вы можете использовать await в приведенном выше коде
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
// your jQuery code here
Если вы хотите сначала проверить, существует ли на странице jQuery, попробуйте это
Причина, по которой вы получаете эту ошибку, заключается в том, что JavaScript не ожидает загрузки скрипта, поэтому при запуске
jQuery(document).ready(function(){...
нет гарантии, что скрипт готов (и никогда не будет).
Это не самое элегантное решение, но работоспособное. По сути, вы можете проверять каждую 1 секунду, чтобы объект jQuery запускал функцию, когда она загружена с вашим кодом. Я бы добавил тайм-аут (скажем, clearTimeout после того, как он был запущен 20 раз), а также, чтобы остановить проверку на неопределенный срок.
var jQueryIsReady = function(){
//Your JQuery code here
}
var checkJquery = function(){
if(typeof jQuery === "undefined"){
return false;
}else{
clearTimeout(interval);
jQueryIsReady();
}
}
var interval = setInterval(checkJquery,1000);
HTML:
<html>
<head>
</head>
<body>
<div id='status'>jQuery is not loaded yet.</div>
<input type='button' value='Click here to load it.' onclick='load()' />
</body>
</html>
Автор сценария:
<script>
load = function() {
load.getScript("jquery-1.7.2.js");
load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
}
// dynamically load any javascript file.
load.getScript = function(filename) {
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.setAttribute("src", filename)
if (typeof script!="undefined")
document.getElementsByTagName("head")[0].appendChild(script)
}
</script>
Из консоли DevTools вы можете запустить:
document.getElementsByTagName("head")[0].innerHTML += '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>';
Проверьте доступную версию jQuery на https://code.jquery.com/jquery/.
Чтобы проверить, загружен ли он, см. Проверка загрузки jquery с помощью Javascript.
Используя require.js, вы можете сделать то же самое безопасным способом. Вы можете просто определить свою зависимость от jquery и затем выполнить код, который вы хотите, используя зависимость, когда она загружается, не загрязняя пространство имен:
Я обычно рекомендую эту библиотеку для управления всеми зависимостями от Javascript. Это просто и позволяет эффективно оптимизировать загрузку ресурсов. Однако есть некоторые меры предосторожности, которые вы, возможно, должны принять при использовании его с JQuery . Мой любимый способ работы с ними объясняется в этом репозитории github и отражается в следующем примере кода:
<title>jQuery+RequireJS Sample Page</title>
<script src="scripts/require.js"></script>
<script>
require({
baseUrl: 'scripts',
paths: {
jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
},
priority: ['jquery']
}, ['main']);
</script>
Асинхронная версия ES6, позволяющая использовать ее как функцию где угодно (аналогично динамическому импорту ):
/**
* @see https://stackoverflow.com/a/10113434
*/
function loadScript(cfg) {
const {
url,
global: globalName
} = cfg;
return new Promise((r, j) => {
// Load the script
const script = document.createElement("script");
script.type = 'text/javascript';
script.onload = function () {
r(globalName && window[globalName]);
};
script.onerror = function (err) {
j(err);
};
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
});
}
Пример использования:
const jQuery = await loadScript({
url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
global: 'jQuery'
});
jQuery('body')
ПРИМЕЧАНИЕ: если вы получитеundefined, вы, вероятно, не указали правильныйglobalимя.