Динамическая загрузка jQuery

Вопрос

Мне необходимо, чтобы jQuery подключался на страницу не из кода самой страницы, а загружался с помощью JavaScript после определённого действия, например, клике по какой-то кнопке. Как мне загрузить jQuery динамически?

Ответ №1

Следующий код динамически загрузит jQuery и выведет сообщение о об успешной загрузке:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
script.addEventListener('load', function(){ 
    $(document).ready(function() {
        alert('jQuery загружен.');
    });
}, false);

Здесь мы создаём новый элемент script, затем помещаем его в секцию head и вешаем на него обработчик события load, в который передаём функцию, и она сработает, когда наша библиотека будет загружена. Можно также поместить этот в отдельную функцию и вызвать её по нажатию определённой кнопки.

<button id="mybutton" onclick="addJquery()">Загрузить jQuery</button>
function addJquery() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    script.addEventListener('load', function(){ 
        $(document).ready(function() {
            alert('jQuery загружен.');
        });
    }, false);
}

Динамическая загрузка jQuery будет выполнена после нажатия на кнопку. В приведённых выше кодах мы используем загрузку jQuery с сайта Google API, но можно подгружать эту библиотеку со своего сайта, или любого другого источника. Просто смените путь к ней в script.src.

Вообще-то, этим методом можно подключить любой внешний JavaScript.

1 комментарий

Добавить комментарий


(обязательно)