Вопрос:

JavaScript Bootstrap требует jQuery, в то время как jQuery уже загружен

javascript jquery html twitter-bootstrap

8327 просмотра

4 ответа

400 Репутация автора

Я сталкиваюсь с ошибкой при загрузке Bootstrapбиблиотеки, поскольку она всегда дает эту ошибку:

Uncaught Ошибка: JavaScript Bootstrap требует jQuery

Несмотря на это, я присоединяю Bootstrapбиблиотеку, убедившись, что jQueryона загружена, но все равно получаю сообщение об ошибке.

Я использую следующий код, чтобы прикрепить jQueryк странице, создав элемент и добавив его к document:

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') {
    console.log("jQuery LOADED");
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");


    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


    if (script_tag.readyState) {
        script_tag.onreadystatechange = function () { // For old versions of IE
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                console.log(window.jQuery.fn.jquery);
                scriptLoadHandler();
            }
        };
    } else {
        console.log("ONLOAD STATE");
        script_tag.onload = scriptLoadHandler;
    }
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main();
}

Здесь я создаю Bootstrapпосле documentтого, как готово:

function main() {

    jQuery(document).ready(function ($) {
    var bootstrap_script = document.createElement('script');
    bootstrap_script.setAttribute("type", "text/javascript");
    bootstrap_script.setAttribute("src",
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");

    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script);
    })
}

Просто чтобы прояснить критическую вещь, я пишу jsкод в отдельном jsфайле, потому что я хочу использовать позже как jQuery plugin. Таким образом, я пытаюсь присоединить библиотеки, так как не гарантирую, что целевая страница будет включать эти библиотеки или нет

Автор: Ali Alhamaly Источник Размещён: 26.12.2016 09:35

Ответы (4)


1 плюс

6477 Репутация автора

Проблема в том, что вы используете более высокую версию. Используйте эту версию:

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Автор: ab29007 Размещён: 26.12.2016 09:38

4 плюса

2383 Репутация автора

у вас отсутствует ")}" в вашей "основной" функции. после исправления загрузчик успешно загружается для меня без каких-либо ошибок. Я использую Firefox 50.1.0

вот ваш код, который работает для меня:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
</head>
<body>

  <script>
    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') {
        console.log("jQuery LOADED");
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");

        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    console.log(window.jQuery.fn.jquery);
                    scriptLoadHandler();
                }
            };
        } else {
            console.log("ONLOAD STATE");
            script_tag.onload = scriptLoadHandler;
        }
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

    function scriptLoadHandler() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
        // Call our main function
        main();
    }

    function main() {
        jQuery(document).ready(function ($) {
        var bootstrap_script = document.createElement('script');
            bootstrap_script.setAttribute("type", "text/javascript");
            bootstrap_script.setAttribute("src",
        "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");

            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script);
        })
    }
  </script>
</body>
</html>

Автор: Abdelaziz Mokhnache Размещён: 26.12.2016 10:05

0 плюса

639 Репутация автора

Зачем делать это так сложно?

Просто добавьте это в свой <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>

Или добавьте его последним в документ, чтобы ускорить загрузку. Затем вам нужно использовать готовые документы в ваших скриптах, чтобы они не запускались до загрузки jQuery.

Автор: TheCrazyProfessor Размещён: 26.12.2016 10:31

1 плюс

4255 Репутация автора

Решение

Попробуйте загрузить JQuery, используя https

script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");

Надеюсь, это сработает.

Автор: Curiousdev Размещён: 26.12.2016 11:11
Вопросы из категории :
32x32